<!-- Better Demo with Bootstrap theme -->
<!DOCTYPE html>
<html>
<head>
	<title>jQuery fontIconPicker - An elegant font icon picker written in jQuery</title>
	<meta name="viewport" content="width=device-width, initial-scale=1" />
	<!-- Demo Style -->
	<link rel="stylesheet" type="text/css" href="lib/css/bootstrap.min.css" />
	<link rel="stylesheet" type="text/css" href="lib/css/bootstrap-theme.min.css" />
	<link rel="stylesheet" type="text/css" href="lib/css/bootstrapValidator.min.css" />
	<link rel="stylesheet" type="text/css" href="style.css" />
	<link rel="stylesheet" type="text/css" href="lib/css/shCore.css" />
	<link rel="stylesheet" type="text/css" href="lib/css/shCoreDefault.css" />

	<!-- jQuery -->
	<script src="lib/js/jquery-1.11.1.min.js"></script>

	<!-- Demo Scripts -->
	<script type="text/javascript" src="lib/js/bootstrap.min.js"></script>
	<script type="text/javascript" src="lib/js/bootstrapValidator.min.js"></script>
	<script type="text/javascript" src="lib/js/shCore.js"></script>
	<script type="text/javascript" src="lib/js/brush/shBrushCss.js"></script>
	<script type="text/javascript" src="lib/js/brush/shBrushJScript.js"></script>
	<script type="text/javascript" src="lib/js/brush/shBrushPlain.js"></script>
	<script type="text/javascript" src="lib/js/brush/shBrushXml.js"></script>

	<!-- icon picker -->
	<script type="text/javascript" src="../jquery.fonticonpicker.min.js"></script>
	<link rel="stylesheet" type="text/css" href="../css/jquery.fonticonpicker.min.css" />
	<link rel="stylesheet" type="text/css" href="../themes/grey-theme/jquery.fonticonpicker.grey.min.css" />
	<link rel="stylesheet" type="text/css" href="../themes/dark-grey-theme/jquery.fonticonpicker.darkgrey.min.css" />
	<link rel="stylesheet" type="text/css" href="../themes/bootstrap-theme/jquery.fonticonpicker.bootstrap.min.css" />
	<link rel="stylesheet" type="text/css" href="../themes/inverted-theme/jquery.fonticonpicker.inverted.min.css" />

	<!-- Font -->
	<link rel="stylesheet" type="text/css" href="fontello-7275ca86/css/fontello.css" />
	<link rel="stylesheet" type="text/css" href="icomoon/style.css" />

	<!-- Init script for this DEMO -->
	<script type="text/javascript" src="demo.js"></script>
</head>
<body>

	<!-- #header -->
	<header id="header">
		<nav class="navbar navbar-default navbar-fixed-top navbar-main" role="navigation">
			<div class="container">
				<!-- Brand and toggle get grouped for better mobile display -->
				<div class="navbar-header">
					<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">
						<span class="sr-only">Toggle navigation</span>
						<span class="icon-bar"></span>
						<span class="icon-bar"></span>
						<span class="icon-bar"></span>
					</button>
					<a class="navbar-brand" href="">fontIconPicker</a>
				</div>

				<!-- Collect the nav links, forms, and other content for toggling -->
				<div class="collapse navbar-collapse navbar-ex1-collapse">
					<ul class="nav navbar-nav">
						<li><a href="#setup">Setup</a></li>
						<li><a href="#examples">Examples</a></li>
						<li><a href="#options">Plugin Options</a></li>
						<li><a href="#plugin-apis">Plugin APIs</a></li>
						<li><a href="#extras">Plugin Extras</a></li>
					</ul>
					<ul class="nav navbar-nav navbar-right">
						<li><a href="#about">About</a></li>
						<li><a href="#site-footer">Credits</a></li>
					</ul>
				</div><!-- /.navbar-collapse -->
			</div>
		</nav>
	</header> <!-- /#header -->

	<!-- #about -->
	<section id="about">
		<div class="jumbotron">
			<div class="container">
				<h1>jQuery fontIconPicker <small>v2.0.0</small></h1>
				<p>jQuery fontIconPicker is a small (<code>3.22KB</code> gzipped) jQuery plugin which allows you to include an elegant icon picker with categories, search and pagination inside your administration forms. The list of icons can be loaded manually using a <code>SELECT</code> field, an <code>Array</code> or <code>Object</code> of icons or directly from a Fontello <code>config.json</code> or IcoMoon <code>selection.json</code> file. Here are some examples.</p>
				<div class="text-left margin-top">
					<div class="downloads pull-right">
						<div class="btn-group btn-group-lg">
							<a data-container="body" href="https://github.com/micc83/fontIconPicker/archive/2.0.0.zip" class="btn btn-primary bstooltip" title="Download the complete package (v2.0.0) including demo and sample codes."><i class="icomoon-download2"></i> Package</a>
							<a data-container="body" href="../jquery.fonticonpicker.min.js" class="btn btn-default bstooltip" title="Production Release: Minified 12.3KB"><i class="icomoon-file-zip"></i> JS: Prod</a>
							<a data-container="body" href="../jquery.fonticonpicker.js" class="btn btn-default bstooltip" title="Development Release: Uncompressed 26.8KB"><i class="icomoon-file-css"></i> JS: Dev</a>
							<a data-container="body" class="btn btn-primary bstooltip" title="View on GitHub" href="https://github.com/micc83/fontIconPicker"><i class="icomoon-github3"></i> GitHub</a>
						</div>
						<div class="clearfix"></div>
					</div>
					<input type="text" id="grey-theme" name="grey-theme" value="" />
					&dash;
					<input type="text" id="dark-grey-theme" name="dark-grey-theme" value="57345" />
					&dash;
					<input type="text" id="bootstrap-theme" name="bootstrap-theme" value="57353" />
					&dash;
					<input type="text" id="inverted-theme" name="inverted-theme" value="57356" />
					<div class="clearfix"></div>
				</div>
			</div>
		</div>
	</section> <!-- /#about -->

	<!-- #main -->
	<main class="container" id="main">

		<div class="alert alert-warning">
		<strong><i class="glyphicon glyphicon-asterisk"></i> ONLY FOR LOCAL DEMO (when online everything will be allright)</strong><br>
		In firefox fontIconPicker icons won't be shown correctly because of CORS. For the same reason "Load icons from JSON config file" won't work on Chrome or IE 10. If you need to do some local testing you can disable strict_origin_policy at your risk.
		</div>

		<!-- #setup -->
		<section id="setup">
			<h2><i class="icomoon-wand"></i> How it works</h2>
			<hr />
			<p>
				Just include a copy of jQuery, the fontIconPickers script, the fontIconPickers theme and your Font Icons. Now you can trigger it on a <code>SELECT</code> or <code>INPUT[type=&quot;text&quot;]</code> element.  check the <a href="#examples">first example</a> to start!
			</p>
			<ul class="nav nav-tabs">
				<li class="active"><a href="#setup_js" data-toggle="tab">Include JavaScript</a></li>
				<li><a href="#setup_css" data-toggle="tab">Include CSS</a></li>
				<li><a href="#setup_fonts" data-toggle="tab">Include Font Icons</a></li>
				<li><a href="#setup_fire" data-toggle="tab">Initialize with jQuery</a></li>
			</ul>
			<div class="tab-content">
				<div class="tab-pane in fade active" id="setup_js">
				<p>Only plugin dependency is jQuery (1.7.1+).</p>
<pre class="brush: html">
&lt;!-- jQuery --&gt;
&lt;script type=&quot;text/javascript&quot; src=&quot;jquery-1.7.1.min.js&quot;&gt;&lt;/script&gt;

&lt;!-- fontIconPicker JS --&gt;
&lt;script type=&quot;text/javascript&quot; src=&quot;jquery.fonticonpicker.min.js&quot;&gt;&lt;/script&gt;
</pre>
				</div>
				<div class="tab-pane fade" id="setup_css">
					<p>Include the core CSS file and optional theme</p>
<pre class="brush: html">
&lt;!-- fontIconPicker core CSS --&gt;
&lt;link rel=&quot;stylesheet&quot; type=&quot;text/css&quot; href=&quot;jquery.fonticonpicker.min.css&quot; /&gt;

&lt;!-- required default theme --&gt;
&lt;link rel=&quot;stylesheet&quot; type=&quot;text/css&quot; href=&quot;themes/grey-theme/jquery.fonticonpicker.grey.min.css&quot; /&gt;

&lt;!-- optional themes --&gt;
&lt;link rel=&quot;stylesheet&quot; type=&quot;text/css&quot; href=&quot;themes/dark-grey-theme/jquery.fonticonpicker.darkgrey.min.css&quot; /&gt;
&lt;link rel=&quot;stylesheet&quot; type=&quot;text/css&quot; href=&quot;themes/bootstrap-theme/jquery.fonticonpicker.bootstrap.min.css&quot; /&gt;
&lt;link rel=&quot;stylesheet&quot; type=&quot;text/css&quot; href=&quot;themes/inverted-theme/jquery.fonticonpicker.inverted.min.css&quot; /&gt;
</pre>
				</div>
				<div class="tab-pane fade" id="setup_fonts">
					<p>Include the font files you wish to pick. In this demo page we are using fontAwesome and IcoMoon fonts.</p>
<pre class="brush: html">
&lt;!-- Font --&gt;
&lt;link rel=&quot;stylesheet&quot; type=&quot;text/css&quot; href=&quot;fontello-7275ca86/css/fontello.css&quot; /&gt;
&lt;link rel=&quot;stylesheet&quot; type=&quot;text/css&quot; href=&quot;icomoon/icomoon.css&quot; /&gt;
</pre>
				</div>
				<div class="tab-pane fade" id="setup_fire">
					<p>Finally call the fontIconPicker on a <code>SELECT</code> or <code>INPUT[type="text"]</code> element.</p>

					<ul class="nav nav-tabs">
						<li class="active"><a href="#setup_select_el" data-toggle="tab">Using on <code>SELECT</code> elements</a></li>
						<li><a href="#setup_text_el" data-toggle="tab">Using on <code>INPUT[type=&quot;text&quot;]</code> elements</a></li>
					</ul>

					<div class="tab-content">
						<div class="tab-pane in fade active" id="setup_select_el">
							<p>Icons will be populated from <code>OPTION</code> elements and will be used as classes by default.</p>
<pre class="brush: html">
&lt;!-- SELECT element --&gt;
&lt;select id=&quot;myselect&quot; name=&quot;myselect&quot; class=&quot;myselect&quot;&gt;
	&lt;option value=&quot;&quot;&gt;No icon&lt;/option&gt;
	&lt;option&gt;icon-user&lt;/option&gt;
	&lt;option&gt;icon-search&lt;/option&gt;
	&lt;option&gt;icon-right-dir&lt;/option&gt;
	&lt;option&gt;icon-star&lt;/option&gt;
	&lt;option&gt;icon-cancel&lt;/option&gt;
	&lt;option&gt;icon-help-circled&lt;/option&gt;
	&lt;option&gt;icon-info-circled&lt;/option&gt;
	&lt;option&gt;icon-eye&lt;/option&gt;
	&lt;option&gt;icon-tag&lt;/option&gt;
	&lt;option&gt;icon-bookmark&lt;/option&gt;
	&lt;option&gt;icon-heart&lt;/option&gt;
	&lt;option&gt;icon-thumbs-down-alt&lt;/option&gt;
	&lt;option&gt;icon-upload-cloud&lt;/option&gt;
	&lt;option&gt;icon-phone-squared&lt;/option&gt;
	&lt;option&gt;icon-cog&lt;/option&gt;
	&lt;option&gt;icon-wrench&lt;/option&gt;
	&lt;option&gt;icon-volume-down&lt;/option&gt;
	&lt;option&gt;icon-down-dir&lt;/option&gt;
	&lt;option&gt;icon-up-dir&lt;/option&gt;
	&lt;option&gt;icon-left-dir&lt;/option&gt;
	&lt;option&gt;icon-thumbs-up-alt&lt;/option&gt;
&lt;/select&gt;
&lt;!-- JavaScript --&gt;
&lt;script type=&quot;text/javascript&quot;&gt;
	// Make sure to fire only when the DOM is ready
	jQuery(document).ready(function($) {
		$(&#039;#myselect&#039;).fontIconPicker(); // Load with default options
	});
&lt;/script&gt;
</pre>
						</div>
						<div class="tab-pane fade" id="setup_text_el">
							<p>If you want to apply to text elements then provide a source.</p>
<pre class="brush: html">
&lt;!-- INPUT element --&gt;
&lt;input type=&quot;text&quot; name=&quot;mytext&quot; id=&quot;mytext&quot; /&gt;
&lt;script type=&quot;text/javascript&quot;&gt;
	jQuery(document).ready(function($) {
		$(&#039;#mytext&#039;).fontIconPicker({
			source:    [&#039;icon-heart&#039;, &#039;icon-search&#039;, &#039;icon-user&#039;, &#039;icon-tag&#039;, &#039;icon-help&#039;],
			emptyIcon: false,
			hasSearch: false
		});
	});
&lt;/script&gt;
</pre>
						</div>
					</div>
				</div>
			</div>
			<hr />
			<p>More advanced icon picker is available like the one with categorized icons or one with attribute selector (<code>&lt;i data-icon=&quot;&amp;#xe000;&quot;&gt;&lt;/i&gt;</code>). Please see more examples below.</p>
		</section> <!-- /#setup -->

		<!-- #examples -->
		<section id="examples">
			<hr />
			<h2><a href="#main" class="icon-up-open"></a> <i class="icomoon-list"></i> Examples</h2>
			<hr />
			<div class="row">
				<div class="col-md-5 col-md-push-7">

					<!-- Examples Menu -->
					<ul class="nav nav-pills nav-stacked">
						<li class="active"><a href="#e1" data-toggle="tab">
							<span class="badge pull-right">basic</span> Load from <code>SELECT</code> field
						</a></li>
						<li><a href="#e2" data-toggle="tab">
							<span class="badge pull-right">basic</span><span class="bstooltip" title="New in v2.0.0"><i class="icon-star"></i></span> Load from <code>SELECT</code> with optgroup for auto categorizing
						</a></li>
						<li><a href="#e3" data-toggle="tab">
							<span class="badge pull-right">basic</span> Load from <code>INPUT</code> text field with simple source
						</a></li>
						<li><a href="#e4" data-toggle="tab">
							<span class="badge pull-right">advanced</span><span class="bstooltip" title="New in v2.0.0"><i class="icon-star"></i></span> Load from <code>INPUT</code> text field with categorized source
						</a></li>
						<li><a href="#e5" data-toggle="tab">
							<span class="badge pull-right">advanced</span><span class="bstooltip" title="New in v2.0.0"><i class="icon-star"></i></span> Load with custom search and attribute selector
						</a></li>
						<li><a href="#e6" data-toggle="tab">
							<span class="badge pull-right">advanced</span> Change icon set on the fly
						</a></li>
						<li><a href="#e7" data-toggle="tab">
							<span class="badge pull-right">advanced</span> No empty icons and no search
						</a></li>
						<li><a href="#e8" data-toggle="tab">
							<span class="badge pull-right">pro</span> Load icons from Fontello JSON config file
						</a></li>
						<li><a href="#e9" data-toggle="tab">
							<span class="badge pull-right">pro</span><span class="bstooltip" title="New in v2.0.0"><i class="icon-star"></i></span> Load icons from icomoon JSON selection file
						</a></li>
						<li><a href="#e10" data-toggle="tab">
							<span class="badge pull-right">pro</span> Trigger event on icon change
						</a></li>
						<li><a href="#e11" data-toggle="tab">
							<span class="badge pull-right">pro</span><span class="bstooltip" title="New in v2.0.0"><i class="icon-star"></i></span> Reinitialize with DOM modifications
						</a></li>
						<li><a href="#e12" data-toggle="tab">
							<span class="badge pull-right">pro</span><span class="bstooltip" title="New in v2.0.0"><i class="icon-star"></i></span> Form Validation with validator engines
						</a></li>
					</ul>
				</div>
				<div class="col-md-7 col-md-pull-5">
					<div class="tab-content vertical">

						<!-- Example 1 -->
						<article id="e1" class="tab-pane in fade active">
							<p>This is a basic example where no configuration options are used. Icons are loaded from <code>SELECT > OPTION</code> elements.</p>
							<div class="live-preview">
								<select id="e1_element" name="e1_element">
									<option value="">No icon</option>
									<option>icon-user</option>
									<option>icon-search</option>
									<option>icon-right-dir</option>
									<option>icon-star</option>
									<option>icon-cancel</option>
									<option>icon-help-circled</option>
									<option>icon-info-circled</option>
									<option>icon-eye</option>
									<option>icon-tag</option>
									<option>icon-bookmark</option>
									<option>icon-heart</option>
									<option>icon-thumbs-down-alt</option>
									<option>icon-upload-cloud</option>
									<option>icon-phone-squared</option>
									<option>icon-cog</option>
									<option>icon-wrench</option>
									<option>icon-volume-down</option>
									<option>icon-down-dir</option>
									<option>icon-up-dir</option>
									<option>icon-left-dir</option>
									<option>icon-thumbs-up-alt</option>
								</select>
							</div>
							<div class="example-code">
								<ul class="nav nav-tabs">
									<li class="active"><a href="#e1_html" data-toggle="tab">HTML</a></li>
									<li><a href="#e1_js" data-toggle="tab">JavaScript</a></li>
								</ul>
								<div class="tab-content">
									<div class="tab-pane in fade active" id="e1_html">
										<pre class="brush: html">
&lt;select id=&quot;e1_element&quot; name=&quot;e1_element&quot;&gt;
	&lt;option value=&quot;&quot;&gt;No icon&lt;/option&gt;
	&lt;option&gt;icon-user&lt;/option&gt;
	&lt;option&gt;icon-search&lt;/option&gt;
	&lt;option&gt;icon-right-dir&lt;/option&gt;
	&lt;option&gt;icon-star&lt;/option&gt;
	&lt;option&gt;icon-cancel&lt;/option&gt;
	&lt;option&gt;icon-help-circled&lt;/option&gt;
	&lt;option&gt;icon-info-circled&lt;/option&gt;
	&lt;option&gt;icon-eye&lt;/option&gt;
	&lt;option&gt;icon-tag&lt;/option&gt;
	&lt;option&gt;icon-bookmark&lt;/option&gt;
	&lt;option&gt;icon-heart&lt;/option&gt;
	&lt;option&gt;icon-thumbs-down-alt&lt;/option&gt;
	&lt;option&gt;icon-upload-cloud&lt;/option&gt;
	&lt;option&gt;icon-phone-squared&lt;/option&gt;
	&lt;option&gt;icon-cog&lt;/option&gt;
	&lt;option&gt;icon-wrench&lt;/option&gt;
	&lt;option&gt;icon-volume-down&lt;/option&gt;
	&lt;option&gt;icon-down-dir&lt;/option&gt;
	&lt;option&gt;icon-up-dir&lt;/option&gt;
	&lt;option&gt;icon-left-dir&lt;/option&gt;
	&lt;option&gt;icon-thumbs-up-alt&lt;/option&gt;
&lt;/select&gt;
										</pre>
									</div>
									<div class="tab-pane fade" id="e1_js">
										<pre class="brush: js">
jQuery(document).ready(function($) {

	/**
	 * Example 1
	 * Load from SELECT field
	 */
	$(&#039;#e1_element&#039;).fontIconPicker();

});
										</pre>
									</div>
								</div>
							</div>
						</article>

						<!-- Example 2 -->
						<article id="e2" class="tab-pane fade">
							<p>When applied on <code>SELECT</code> elements with <code>OPTGROUP</code> the icons will be categorized. Any <code>OPTION</code> field which is not under any <code>OPTGROUP</code> will be put to the <em>Uncategorized</em> category.</p>
							<div class="live-preview">
								<select name="e2_element" id="e2_element">
									<option value="">No Icon</option>
									<option value="57598">Checkmark</option>
									<option value="57599">Checkmark 2</option>
									<option value="57601">Minus</option>
									<option value="57602">Plus</option>
									<option value="57607">Stop</option>
									<option value="57608">Backward</option>
									<option value="57612">Stop 2</option>
									<option value="57613">Backward 2</option>
									<option value="57615">First</option>
									<option value="57616">Last</option>
									<option value="57619">Eject</option>
									<option value="57627">Loop</option>
									<option value="57628">Loop 2</option>
									<option value="57629">Loop 3</option>
									<option value="57630">Shuffle</option>
									<option value="57655">Tab</option>
									<option value="57656">Checkbox checked</option>
									<option value="57657">Checkbox unchecked</option>
									<option value="57658">Checkbox partial</option>
									<option value="57661">Crop</option>
									<option value="57665">Font</option>
									<option value="57666">Text height</option>
									<option value="57667">Text width</option>
									<option value="57672">Omega</option>
									<option value="57673">Sigma</option>
									<option value="57676">Insert template</option>
									<option value="57677">Pilcrow</option>
									<option value="57678">Lefttoright</option>
									<option value="57679">Righttoleft</option>
									<option value="57680">Paragraph left</option>
									<option value="57681">Paragraph center</option>
									<option value="57682">Paragraph right</option>
									<option value="57683">Paragraph justify</option>
									<option value="57684">Paragraph left 2</option>
									<option value="57685">Paragraph center 2</option>
									<option value="57686">Paragraph right 2</option>
									<option value="57687">Paragraph justify 2</option>
									<option value="57690">Newtab</option>
									<option value="57695">Mail</option>
									<option value="57696">Mail 2</option>
									<option value="57697">Mail 3</option>
									<option value="57698">Mail 4</option>
									<option value="57699">Google</option>
									<option value="57708">Instagram</option>
									<option value="57712">Feed 2</option>
									<option value="57713">Feed 3</option>
									<option value="57714">Feed 4</option>
									<option value="57715">Youtube</option>
									<option value="57716">Youtube 2</option>
									<option value="57720">Lanyrd</option>
									<option value="57721">Flickr</option>
									<option value="57722">Flickr 2</option>
									<option value="57723">Flickr 3</option>
									<option value="57724">Flickr 4</option>
									<option value="57725">Picassa</option>
									<option value="57726">Picassa 2</option>
									<option value="57727">Dribbble</option>
									<option value="57728">Dribbble 2</option>
									<option value="57729">Dribbble 3</option>
									<option value="57730">Forrst</option>
									<option value="57731">Forrst 2</option>
									<option value="57732">Deviantart</option>
									<option value="57733">Deviantart 2</option>
									<option value="57734">Steam</option>
									<option value="57735">Steam 2</option>
									<option value="57744">Blogger</option>
									<option value="57745">Blogger 2</option>
									<option value="57749">Tux</option>
									<option value="57762">Delicious</option>
									<option value="57768">Xing</option>
									<option value="57769">Xing 2</option>
									<option value="57770">Flattr</option>
									<option value="57771">Foursquare</option>
									<option value="57772">Foursquare 2</option>
									<option value="57777">Libreoffice</option>
									<option value="57788">Css 3</option>
									<option value="57791">IE</option>
									<option value="57794">IcoMoon</option>
									<optgroup label="Web Applications">
										<option value="57436">Box add</option>
										<option value="57437">Box remove</option>
										<option value="57438">Download</option>
										<option value="57439">Upload</option>
										<option value="57524">List</option>
										<option value="57525">List 2</option>
										<option value="57526">Numbered list</option>
										<option value="57527">Menu</option>
										<option value="57528">Menu 2</option>
										<option value="57531">Cloud download</option>
										<option value="57532">Cloud upload</option>
										<option value="57533">Download 2</option>
										<option value="57534">Upload 2</option>
										<option value="57535">Download 3</option>
										<option value="57536">Upload 3</option>
										<option value="57537">Globe</option>
										<option value="57541">Attachment</option>
										<option value="57545">Bookmark</option>
										<option value="57691">Embed</option>
										<option value="57692">Code</option>
									</optgroup>
									<optgroup label="Business Icons">
										<option value="57347">Office</option>
										<option value="57348">Newspaper</option>
										<option value="57375">Book</option>
										<option value="57376">Books</option>
										<option value="57377">Library</option>
										<option value="57379">Profile</option>
										<option value="57403">Support</option>
										<option value="57406">Address book</option>
										<option value="57432">Cabinet</option>
										<option value="57433">Drawer</option>
										<option value="57434">Drawer 2</option>
										<option value="57435">Drawer 3</option>
										<option value="57450">Bubble</option>
										<option value="57453">Bubble 2</option>
										<option value="57456">User</option>
										<option value="57458">User 2</option>
										<option value="57460">User 3</option>
										<option value="57461">User 4</option>
										<option value="57463">Busy</option>
									</optgroup>
									<optgroup label="eCommerce">
										<option value="57392">Tag</option>
										<option value="57397">Cart</option>
										<option value="57398">Cart 2</option>
										<option value="57399">Cart 3</option>
										<option value="57402">Calculate</option>
									</optgroup>
									<optgroup label="Currency Icons">
									</optgroup>
									<optgroup label="Form Control Icons">
										<option value="57383">Copy</option>
										<option value="57384">Copy 2</option>
										<option value="57385">Copy 3</option>
										<option value="57386">Paste</option>
										<option value="57387">Paste 2</option>
										<option value="57388">Paste 3</option>
										<option value="57484">Settings</option>
										<option value="57594">Cancel circle</option>
										<option value="57595">Checkmark circle</option>
										<option value="57600">Spell check</option>
										<option value="57603">Enter</option>
										<option value="57604">Exit</option>
										<option value="57659">Radio checked</option>
										<option value="57660">Radio unchecked</option>
										<option value="57693">Console</option>
									</optgroup>
									<optgroup label="User Action & Text Editor">
										<option value="57442">Undo</option>
										<option value="57443">Redo</option>
										<option value="57444">Flip</option>
										<option value="57445">Flip 2</option>
										<option value="57446">Undo 2</option>
										<option value="57447">Redo 2</option>
										<option value="57472">Zoomin</option>
										<option value="57473">Zoomout</option>
										<option value="57474">Expand</option>
										<option value="57475">Contract</option>
										<option value="57476">Expand 2</option>
										<option value="57477">Contract 2</option>
										<option value="57539">Link</option>
										<option value="57662">Scissors</option>
										<option value="57668">Bold</option>
										<option value="57669">Underline</option>
										<option value="57670">Italic</option>
										<option value="57671">Strikethrough</option>
										<option value="57674">Table</option>
										<option value="57675">Table 2</option>
										<option value="57688">Indent increase</option>
										<option value="57689">Indent decrease</option>
									</optgroup>
									<optgroup label="Charts and Codes">
										<option value="57493">Pie</option>
									</optgroup>
									<optgroup label="Attentive">
										<option value="57543">Eye blocked</option>
										<option value="57588">Warning</option>
										<option value="57590">Question</option>
										<option value="57591">Info</option>
										<option value="57592">Info 2</option>
										<option value="57593">Blocked</option>
										<option value="57596">Spam</option>
									</optgroup>
									<optgroup label="Multimedia Icons">
										<option value="57356">Image</option>
										<option value="57357">Image 2</option>
										<option value="57362">Play</option>
										<option value="57363">Film</option>
										<option value="57448">Forward</option>
										<option value="57485">Equalizer</option>
										<option value="57547">Brightness medium</option>
										<option value="57548">Brightness contrast</option>
										<option value="57549">Contrast</option>
										<option value="57605">Play 2</option>
										<option value="57606">Pause</option>
										<option value="57609">Forward 2</option>
										<option value="57610">Play 3</option>
										<option value="57611">Pause 2</option>
										<option value="57614">Forward 3</option>
										<option value="57617">Previous</option>
										<option value="57618">Next</option>
										<option value="57620">Volume high</option>
										<option value="57621">Volume medium</option>
										<option value="57622">Volume low</option>
										<option value="57623">Volume mute</option>
										<option value="57624">Volume mute 2</option>
										<option value="57625">Volume increase</option>
										<option value="57626">Volume decrease</option>
									</optgroup>
									<optgroup label="Location and Contact">
										<option value="57344">Home</option>
										<option value="57345">Home 2</option>
										<option value="57346">Home 3</option>
										<option value="57404">Phone</option>
										<option value="57405">Phone hang up</option>
										<option value="57408">Envelope</option>
										<option value="57410">Location</option>
										<option value="57411">Location 2</option>
										<option value="57413">Map</option>
										<option value="57414">Map 2</option>
										<option value="57540">Flag</option>
									</optgroup>
									<optgroup label="Date and Time">
										<option value="57415">History</option>
										<option value="57416">Clock</option>
										<option value="57417">Clock 2</option>
										<option value="57421">Stopwatch</option>
										<option value="57422">Calendar</option>
										<option value="57423">Calendar 2</option>
									</optgroup>
									<optgroup label="Devices">
										<option value="57359">Camera</option>
										<option value="57361">Headphones</option>
										<option value="57364">Camera 2</option>
										<option value="57425">Keyboard</option>
										<option value="57426">Screen</option>
										<option value="57430">Tablet</option>
									</optgroup>
									<optgroup label="Tools">
										<option value="57349">Pencil</option>
										<option value="57350">Pencil 2</option>
										<option value="57352">Pen</option>
										<option value="57355">Paint format</option>
										<option value="57365">Dice</option>
										<option value="57478">Key</option>
										<option value="57479">Key 2</option>
										<option value="57480">Lock</option>
										<option value="57481">Lock 2</option>
										<option value="57482">Unlocked</option>
										<option value="57483">Wrench</option>
										<option value="57486">Cog</option>
										<option value="57487">Cogs</option>
										<option value="57488">Cog 2</option>
										<option value="57663">Filter</option>
										<option value="57664">Filter 2</option>
									</optgroup>
									<optgroup label="Social and Networking">
										<option value="57694">Share</option>
										<option value="57700">Googleplus</option>
										<option value="57701">Googleplus 2</option>
										<option value="57702">Googleplus 3</option>
										<option value="57703">Googleplus 4</option>
										<option value="57704">Google drive</option>
										<option value="57705">Facebook</option>
										<option value="57706">Facebook 2</option>
										<option value="57707">Facebook 3</option>
										<option value="57709">Twitter</option>
										<option value="57710">Twitter 2</option>
										<option value="57711">Twitter 3</option>
										<option value="57717">Vimeo</option>
										<option value="57718">Vimeo 2</option>
										<option value="57719">Vimeo 3</option>
										<option value="57736">Github</option>
										<option value="57737">Github 2</option>
										<option value="57738">Github 3</option>
										<option value="57739">Github 4</option>
										<option value="57740">Github 5</option>
										<option value="57741">Wordpress</option>
										<option value="57742">Wordpress 2</option>
										<option value="57746">Tumblr</option>
										<option value="57747">Tumblr 2</option>
										<option value="57748">Yahoo</option>
										<option value="57755">Soundcloud</option>
										<option value="57756">Soundcloud 2</option>
										<option value="57758">Reddit</option>
										<option value="57759">Linkedin</option>
										<option value="57760">Lastfm</option>
										<option value="57761">Lastfm 2</option>
										<option value="57763">Stumbleupon</option>
										<option value="57764">Stumbleupon 2</option>
										<option value="57765">Stackoverflow</option>
										<option value="57766">Pinterest</option>
										<option value="57767">Pinterest 2</option>
										<option value="57776">Yelp</option>
									</optgroup>
									<optgroup label="Brands">
										<option value="57743">Joomla</option>
										<option value="57750">Apple</option>
										<option value="57751">Finder</option>
										<option value="57752">Android</option>
										<option value="57753">Windows</option>
										<option value="57754">Windows 8</option>
										<option value="57757">Skype</option>
										<option value="57773">Paypal</option>
										<option value="57774">Paypal 2</option>
										<option value="57775">Paypal 3</option>
										<option value="57789">Chrome</option>
										<option value="57790">Firefox</option>
										<option value="57792">Opera</option>
										<option value="57793">Safari</option>
									</optgroup>
									<optgroup label="Files & Documents">
										<option value="57378">File</option>
										<option value="57380">File 2</option>
										<option value="57381">File 3</option>
										<option value="57382">File 4</option>
										<option value="57390">Folder</option>
										<option value="57391">Folder open</option>
										<option value="57778">File pdf</option>
										<option value="57779">File openoffice</option>
										<option value="57780">File word</option>
										<option value="57781">File excel</option>
										<option value="57782">File zip</option>
										<option value="57783">File powerpoint</option>
										<option value="57784">File xml</option>
										<option value="57785">File css</option>
										<option value="57786">Html 5</option>
										<option value="57787">Html 52</option>
									</optgroup>
									<optgroup label="Like & Dislike Icons">
										<option value="57542">Eye</option>
										<option value="57544">Eye 2</option>
										<option value="57550">Star</option>
										<option value="57551">Star 2</option>
										<option value="57552">Star 3</option>
										<option value="57553">Heart</option>
										<option value="57554">Heart 2</option>
										<option value="57555">Heart broken</option>
										<option value="57556">Thumbs up</option>
										<option value="57557">Thumbs up 2</option>
									</optgroup>
									<optgroup label="Emoticons">
										<option value="57558">Happy</option>
										<option value="57559">Happy 2</option>
										<option value="57560">Smiley</option>
										<option value="57561">Smiley 2</option>
										<option value="57562">Tongue</option>
										<option value="57563">Tongue 2</option>
										<option value="57564">Sad</option>
										<option value="57565">Sad 2</option>
										<option value="57566">Wink</option>
										<option value="57567">Wink 2</option>
										<option value="57568">Grin</option>
										<option value="57569">Grin 2</option>
										<option value="57570">Cool</option>
										<option value="57571">Cool 2</option>
										<option value="57572">Angry</option>
										<option value="57573">Angry 2</option>
										<option value="57574">Evil</option>
										<option value="57575">Evil 2</option>
										<option value="57576">Shocked</option>
										<option value="57577">Shocked 2</option>
										<option value="57578">Confused</option>
										<option value="57579">Confused 2</option>
										<option value="57580">Neutral</option>
										<option value="57581">Neutral 2</option>
										<option value="57582">Wondering</option>
										<option value="57583">Wondering 2</option>
									</optgroup>
									<optgroup label="Directional Icons">
										<option value="57584">Point up</option>
										<option value="57585">Point right</option>
										<option value="57586">Point down</option>
										<option value="57587">Point left</option>
										<option value="57631">Arrow up left</option>
										<option value="57632">Arrow up</option>
										<option value="57633">Arrow up right</option>
										<option value="57634">Arrow right</option>
										<option value="57635">Arrow down right</option>
										<option value="57636">Arrow down</option>
										<option value="57637">Arrow down left</option>
										<option value="57638">Arrow left</option>
										<option value="57639">Arrow up left 2</option>
										<option value="57640">Arrow up 2</option>
										<option value="57641">Arrow up right 2</option>
										<option value="57642">Arrow right 2</option>
										<option value="57643">Arrow down right 2</option>
										<option value="57644">Arrow down 2</option>
										<option value="57645">Arrow down left 2</option>
										<option value="57646">Arrow left 2</option>
										<option value="57647">Arrow up left 3</option>
										<option value="57648">Arrow up 3</option>
										<option value="57649">Arrow up right 3</option>
										<option value="57650">Arrow right 3</option>
										<option value="57651">Arrow down right 3</option>
										<option value="57652">Arrow down 3</option>
										<option value="57653">Arrow down left 3</option>
										<option value="57654">Arrow left 3</option>
									</optgroup>
									<optgroup label="Other Icons">
										<option value="57351">Quill</option>
										<option value="57353">Blog</option>
										<option value="57354">Droplet</option>
										<option value="57358">Images</option>
										<option value="57360">Music</option>
										<option value="57366">Pacman</option>
										<option value="57367">Spades</option>
										<option value="57368">Clubs</option>
										<option value="57369">Diamonds</option>
										<option value="57370">Pawn</option>
										<option value="57371">Bullhorn</option>
										<option value="57372">Connection</option>
										<option value="57373">Podcast</option>
										<option value="57374">Feed</option>
										<option value="57389">Stack</option>
										<option value="57393">Tags</option>
										<option value="57394">Barcode</option>
										<option value="57395">Qrcode</option>
										<option value="57396">Ticket</option>
										<option value="57400">Coin</option>
										<option value="57401">Credit</option>
										<option value="57407">Notebook</option>
										<option value="57409">Pushpin</option>
										<option value="57412">Compass</option>
										<option value="57418">Alarm</option>
										<option value="57419">Alarm 2</option>
										<option value="57420">Bell</option>
										<option value="57424">Print</option>
										<option value="57427">Laptop</option>
										<option value="57428">Mobile</option>
										<option value="57429">Mobile 2</option>
										<option value="57431">Tv</option>
										<option value="57440">Disk</option>
										<option value="57441">Storage</option>
										<option value="57449">Reply</option>
										<option value="57451">Bubbles</option>
										<option value="57452">Bubbles 2</option>
										<option value="57454">Bubbles 3</option>
										<option value="57455">Bubbles 4</option>
										<option value="57457">Users</option>
										<option value="57459">Users 2</option>
										<option value="57462">Quotes left</option>
										<option value="57464">Spinner</option>
										<option value="57465">Spinner 2</option>
										<option value="57466">Spinner 3</option>
										<option value="57467">Spinner 4</option>
										<option value="57468">Spinner 5</option>
										<option value="57469">Spinner 6</option>
										<option value="57470">Binoculars</option>
										<option value="57471">Search</option>
										<option value="57489">Hammer</option>
										<option value="57490">Wand</option>
										<option value="57491">Aid</option>
										<option value="57492">Bug</option>
										<option value="57494">Stats</option>
										<option value="57495">Bars</option>
										<option value="57496">Bars 2</option>
										<option value="57497">Gift</option>
										<option value="57498">Trophy</option>
										<option value="57499">Glass</option>
										<option value="57500">Mug</option>
										<option value="57501">Food</option>
										<option value="57502">Leaf</option>
										<option value="57503">Rocket</option>
										<option value="57504">Meter</option>
										<option value="57505">Meter 2</option>
										<option value="57506">Dashboard</option>
										<option value="57507">Hammer 2</option>
										<option value="57508">Fire</option>
										<option value="57509">Lab</option>
										<option value="57510">Magnet</option>
										<option value="57511">Remove</option>
										<option value="57512">Remove 2</option>
										<option value="57513">Briefcase</option>
										<option value="57514">Airplane</option>
										<option value="57515">Truck</option>
										<option value="57516">Road</option>
										<option value="57517">Accessibility</option>
										<option value="57518">Target</option>
										<option value="57519">Shield</option>
										<option value="57520">Lightning</option>
										<option value="57521">Switch</option>
										<option value="57522">Powercord</option>
										<option value="57523">Signup</option>
										<option value="57529">Tree</option>
										<option value="57530">Cloud</option>
										<option value="57538">Earth</option>
										<option value="57546">Bookmarks</option>
										<option value="57589">Notification</option>
										<option value="57597">Close</option>
									</optgroup>
								</select>
							</div>
							<div class="example-code">
								<ul class="nav nav-tabs">
									<li class="active"><a href="#e2_html" data-toggle="tab">HTML</a></li>
									<li><a href="#e2_js" data-toggle="tab">JavaScript</a></li>
								</ul>
								<div class="tab-content">
									<div class="tab-pane in fade active" id="e2_html">
										<pre class="brush: html">
&lt;select name=&quot;e2_element&quot; id=&quot;e2_element&quot;&gt;
	&lt;option value=&quot;&quot;&gt;No Icon&lt;/option&gt;
	&lt;option value=&quot;57598&quot;&gt;Checkmark&lt;/option&gt;
	&lt;option value=&quot;57599&quot;&gt;Checkmark 2&lt;/option&gt;
	&lt;option value=&quot;57601&quot;&gt;Minus&lt;/option&gt;
	&lt;option value=&quot;57602&quot;&gt;Plus&lt;/option&gt;
	&lt;option value=&quot;57607&quot;&gt;Stop&lt;/option&gt;
	&lt;option value=&quot;57608&quot;&gt;Backward&lt;/option&gt;
	&lt;option value=&quot;57612&quot;&gt;Stop 2&lt;/option&gt;
	&lt;option value=&quot;57613&quot;&gt;Backward 2&lt;/option&gt;
	&lt;option value=&quot;57615&quot;&gt;First&lt;/option&gt;
	&lt;option value=&quot;57616&quot;&gt;Last&lt;/option&gt;
	&lt;option value=&quot;57619&quot;&gt;Eject&lt;/option&gt;
	&lt;option value=&quot;57627&quot;&gt;Loop&lt;/option&gt;
	&lt;option value=&quot;57628&quot;&gt;Loop 2&lt;/option&gt;
	&lt;option value=&quot;57629&quot;&gt;Loop 3&lt;/option&gt;
	&lt;option value=&quot;57630&quot;&gt;Shuffle&lt;/option&gt;
	&lt;option value=&quot;57655&quot;&gt;Tab&lt;/option&gt;
	&lt;option value=&quot;57656&quot;&gt;Checkbox checked&lt;/option&gt;
	&lt;option value=&quot;57657&quot;&gt;Checkbox unchecked&lt;/option&gt;
	&lt;option value=&quot;57658&quot;&gt;Checkbox partial&lt;/option&gt;
	&lt;option value=&quot;57661&quot;&gt;Crop&lt;/option&gt;
	&lt;option value=&quot;57665&quot;&gt;Font&lt;/option&gt;
	&lt;option value=&quot;57666&quot;&gt;Text height&lt;/option&gt;
	&lt;option value=&quot;57667&quot;&gt;Text width&lt;/option&gt;
	&lt;option value=&quot;57672&quot;&gt;Omega&lt;/option&gt;
	&lt;option value=&quot;57673&quot;&gt;Sigma&lt;/option&gt;
	&lt;option value=&quot;57676&quot;&gt;Insert template&lt;/option&gt;
	&lt;option value=&quot;57677&quot;&gt;Pilcrow&lt;/option&gt;
	&lt;option value=&quot;57678&quot;&gt;Lefttoright&lt;/option&gt;
	&lt;option value=&quot;57679&quot;&gt;Righttoleft&lt;/option&gt;
	&lt;option value=&quot;57680&quot;&gt;Paragraph left&lt;/option&gt;
	&lt;option value=&quot;57681&quot;&gt;Paragraph center&lt;/option&gt;
	&lt;option value=&quot;57682&quot;&gt;Paragraph right&lt;/option&gt;
	&lt;option value=&quot;57683&quot;&gt;Paragraph justify&lt;/option&gt;
	&lt;option value=&quot;57684&quot;&gt;Paragraph left 2&lt;/option&gt;
	&lt;option value=&quot;57685&quot;&gt;Paragraph center 2&lt;/option&gt;
	&lt;option value=&quot;57686&quot;&gt;Paragraph right 2&lt;/option&gt;
	&lt;option value=&quot;57687&quot;&gt;Paragraph justify 2&lt;/option&gt;
	&lt;option value=&quot;57690&quot;&gt;Newtab&lt;/option&gt;
	&lt;option value=&quot;57695&quot;&gt;Mail&lt;/option&gt;
	&lt;option value=&quot;57696&quot;&gt;Mail 2&lt;/option&gt;
	&lt;option value=&quot;57697&quot;&gt;Mail 3&lt;/option&gt;
	&lt;option value=&quot;57698&quot;&gt;Mail 4&lt;/option&gt;
	&lt;option value=&quot;57699&quot;&gt;Google&lt;/option&gt;
	&lt;option value=&quot;57708&quot;&gt;Instagram&lt;/option&gt;
	&lt;option value=&quot;57712&quot;&gt;Feed 2&lt;/option&gt;
	&lt;option value=&quot;57713&quot;&gt;Feed 3&lt;/option&gt;
	&lt;option value=&quot;57714&quot;&gt;Feed 4&lt;/option&gt;
	&lt;option value=&quot;57715&quot;&gt;Youtube&lt;/option&gt;
	&lt;option value=&quot;57716&quot;&gt;Youtube 2&lt;/option&gt;
	&lt;option value=&quot;57720&quot;&gt;Lanyrd&lt;/option&gt;
	&lt;option value=&quot;57721&quot;&gt;Flickr&lt;/option&gt;
	&lt;option value=&quot;57722&quot;&gt;Flickr 2&lt;/option&gt;
	&lt;option value=&quot;57723&quot;&gt;Flickr 3&lt;/option&gt;
	&lt;option value=&quot;57724&quot;&gt;Flickr 4&lt;/option&gt;
	&lt;option value=&quot;57725&quot;&gt;Picassa&lt;/option&gt;
	&lt;option value=&quot;57726&quot;&gt;Picassa 2&lt;/option&gt;
	&lt;option value=&quot;57727&quot;&gt;Dribbble&lt;/option&gt;
	&lt;option value=&quot;57728&quot;&gt;Dribbble 2&lt;/option&gt;
	&lt;option value=&quot;57729&quot;&gt;Dribbble 3&lt;/option&gt;
	&lt;option value=&quot;57730&quot;&gt;Forrst&lt;/option&gt;
	&lt;option value=&quot;57731&quot;&gt;Forrst 2&lt;/option&gt;
	&lt;option value=&quot;57732&quot;&gt;Deviantart&lt;/option&gt;
	&lt;option value=&quot;57733&quot;&gt;Deviantart 2&lt;/option&gt;
	&lt;option value=&quot;57734&quot;&gt;Steam&lt;/option&gt;
	&lt;option value=&quot;57735&quot;&gt;Steam 2&lt;/option&gt;
	&lt;option value=&quot;57744&quot;&gt;Blogger&lt;/option&gt;
	&lt;option value=&quot;57745&quot;&gt;Blogger 2&lt;/option&gt;
	&lt;option value=&quot;57749&quot;&gt;Tux&lt;/option&gt;
	&lt;option value=&quot;57762&quot;&gt;Delicious&lt;/option&gt;
	&lt;option value=&quot;57768&quot;&gt;Xing&lt;/option&gt;
	&lt;option value=&quot;57769&quot;&gt;Xing 2&lt;/option&gt;
	&lt;option value=&quot;57770&quot;&gt;Flattr&lt;/option&gt;
	&lt;option value=&quot;57771&quot;&gt;Foursquare&lt;/option&gt;
	&lt;option value=&quot;57772&quot;&gt;Foursquare 2&lt;/option&gt;
	&lt;option value=&quot;57777&quot;&gt;Libreoffice&lt;/option&gt;
	&lt;option value=&quot;57788&quot;&gt;Css 3&lt;/option&gt;
	&lt;option value=&quot;57791&quot;&gt;IE&lt;/option&gt;
	&lt;option value=&quot;57794&quot;&gt;IcoMoon&lt;/option&gt;
	&lt;optgroup label=&quot;Web Applications&quot;&gt;
		&lt;option value=&quot;57436&quot;&gt;Box add&lt;/option&gt;
		&lt;option value=&quot;57437&quot;&gt;Box remove&lt;/option&gt;
		&lt;option value=&quot;57438&quot;&gt;Download&lt;/option&gt;
		&lt;option value=&quot;57439&quot;&gt;Upload&lt;/option&gt;
		&lt;option value=&quot;57524&quot;&gt;List&lt;/option&gt;
		&lt;option value=&quot;57525&quot;&gt;List 2&lt;/option&gt;
		&lt;option value=&quot;57526&quot;&gt;Numbered list&lt;/option&gt;
		&lt;option value=&quot;57527&quot;&gt;Menu&lt;/option&gt;
		&lt;option value=&quot;57528&quot;&gt;Menu 2&lt;/option&gt;
		&lt;option value=&quot;57531&quot;&gt;Cloud download&lt;/option&gt;
		&lt;option value=&quot;57532&quot;&gt;Cloud upload&lt;/option&gt;
		&lt;option value=&quot;57533&quot;&gt;Download 2&lt;/option&gt;
		&lt;option value=&quot;57534&quot;&gt;Upload 2&lt;/option&gt;
		&lt;option value=&quot;57535&quot;&gt;Download 3&lt;/option&gt;
		&lt;option value=&quot;57536&quot;&gt;Upload 3&lt;/option&gt;
		&lt;option value=&quot;57537&quot;&gt;Globe&lt;/option&gt;
		&lt;option value=&quot;57541&quot;&gt;Attachment&lt;/option&gt;
		&lt;option value=&quot;57545&quot;&gt;Bookmark&lt;/option&gt;
		&lt;option value=&quot;57691&quot;&gt;Embed&lt;/option&gt;
		&lt;option value=&quot;57692&quot;&gt;Code&lt;/option&gt;
	&lt;/optgroup&gt;
	&lt;optgroup label=&quot;Business Icons&quot;&gt;
		&lt;option value=&quot;57347&quot;&gt;Office&lt;/option&gt;
		&lt;option value=&quot;57348&quot;&gt;Newspaper&lt;/option&gt;
		&lt;option value=&quot;57375&quot;&gt;Book&lt;/option&gt;
		&lt;option value=&quot;57376&quot;&gt;Books&lt;/option&gt;
		&lt;option value=&quot;57377&quot;&gt;Library&lt;/option&gt;
		&lt;option value=&quot;57379&quot;&gt;Profile&lt;/option&gt;
		&lt;option value=&quot;57403&quot;&gt;Support&lt;/option&gt;
		&lt;option value=&quot;57406&quot;&gt;Address book&lt;/option&gt;
		&lt;option value=&quot;57432&quot;&gt;Cabinet&lt;/option&gt;
		&lt;option value=&quot;57433&quot;&gt;Drawer&lt;/option&gt;
		&lt;option value=&quot;57434&quot;&gt;Drawer 2&lt;/option&gt;
		&lt;option value=&quot;57435&quot;&gt;Drawer 3&lt;/option&gt;
		&lt;option value=&quot;57450&quot;&gt;Bubble&lt;/option&gt;
		&lt;option value=&quot;57453&quot;&gt;Bubble 2&lt;/option&gt;
		&lt;option value=&quot;57456&quot;&gt;User&lt;/option&gt;
		&lt;option value=&quot;57458&quot;&gt;User 2&lt;/option&gt;
		&lt;option value=&quot;57460&quot;&gt;User 3&lt;/option&gt;
		&lt;option value=&quot;57461&quot;&gt;User 4&lt;/option&gt;
		&lt;option value=&quot;57463&quot;&gt;Busy&lt;/option&gt;
	&lt;/optgroup&gt;
	&lt;optgroup label=&quot;eCommerce&quot;&gt;
		&lt;option value=&quot;57392&quot;&gt;Tag&lt;/option&gt;
		&lt;option value=&quot;57397&quot;&gt;Cart&lt;/option&gt;
		&lt;option value=&quot;57398&quot;&gt;Cart 2&lt;/option&gt;
		&lt;option value=&quot;57399&quot;&gt;Cart 3&lt;/option&gt;
		&lt;option value=&quot;57402&quot;&gt;Calculate&lt;/option&gt;
	&lt;/optgroup&gt;
	&lt;optgroup label=&quot;Currency Icons&quot;&gt;
	&lt;/optgroup&gt;
	&lt;optgroup label=&quot;Form Control Icons&quot;&gt;
		&lt;option value=&quot;57383&quot;&gt;Copy&lt;/option&gt;
		&lt;option value=&quot;57384&quot;&gt;Copy 2&lt;/option&gt;
		&lt;option value=&quot;57385&quot;&gt;Copy 3&lt;/option&gt;
		&lt;option value=&quot;57386&quot;&gt;Paste&lt;/option&gt;
		&lt;option value=&quot;57387&quot;&gt;Paste 2&lt;/option&gt;
		&lt;option value=&quot;57388&quot;&gt;Paste 3&lt;/option&gt;
		&lt;option value=&quot;57484&quot;&gt;Settings&lt;/option&gt;
		&lt;option value=&quot;57594&quot;&gt;Cancel circle&lt;/option&gt;
		&lt;option value=&quot;57595&quot;&gt;Checkmark circle&lt;/option&gt;
		&lt;option value=&quot;57600&quot;&gt;Spell check&lt;/option&gt;
		&lt;option value=&quot;57603&quot;&gt;Enter&lt;/option&gt;
		&lt;option value=&quot;57604&quot;&gt;Exit&lt;/option&gt;
		&lt;option value=&quot;57659&quot;&gt;Radio checked&lt;/option&gt;
		&lt;option value=&quot;57660&quot;&gt;Radio unchecked&lt;/option&gt;
		&lt;option value=&quot;57693&quot;&gt;Console&lt;/option&gt;
	&lt;/optgroup&gt;
	&lt;optgroup label=&quot;User Action &amp; Text Editor&quot;&gt;
		&lt;option value=&quot;57442&quot;&gt;Undo&lt;/option&gt;
		&lt;option value=&quot;57443&quot;&gt;Redo&lt;/option&gt;
		&lt;option value=&quot;57444&quot;&gt;Flip&lt;/option&gt;
		&lt;option value=&quot;57445&quot;&gt;Flip 2&lt;/option&gt;
		&lt;option value=&quot;57446&quot;&gt;Undo 2&lt;/option&gt;
		&lt;option value=&quot;57447&quot;&gt;Redo 2&lt;/option&gt;
		&lt;option value=&quot;57472&quot;&gt;Zoomin&lt;/option&gt;
		&lt;option value=&quot;57473&quot;&gt;Zoomout&lt;/option&gt;
		&lt;option value=&quot;57474&quot;&gt;Expand&lt;/option&gt;
		&lt;option value=&quot;57475&quot;&gt;Contract&lt;/option&gt;
		&lt;option value=&quot;57476&quot;&gt;Expand 2&lt;/option&gt;
		&lt;option value=&quot;57477&quot;&gt;Contract 2&lt;/option&gt;
		&lt;option value=&quot;57539&quot;&gt;Link&lt;/option&gt;
		&lt;option value=&quot;57662&quot;&gt;Scissors&lt;/option&gt;
		&lt;option value=&quot;57668&quot;&gt;Bold&lt;/option&gt;
		&lt;option value=&quot;57669&quot;&gt;Underline&lt;/option&gt;
		&lt;option value=&quot;57670&quot;&gt;Italic&lt;/option&gt;
		&lt;option value=&quot;57671&quot;&gt;Strikethrough&lt;/option&gt;
		&lt;option value=&quot;57674&quot;&gt;Table&lt;/option&gt;
		&lt;option value=&quot;57675&quot;&gt;Table 2&lt;/option&gt;
		&lt;option value=&quot;57688&quot;&gt;Indent increase&lt;/option&gt;
		&lt;option value=&quot;57689&quot;&gt;Indent decrease&lt;/option&gt;
	&lt;/optgroup&gt;
	&lt;optgroup label=&quot;Charts and Codes&quot;&gt;
		&lt;option value=&quot;57493&quot;&gt;Pie&lt;/option&gt;
	&lt;/optgroup&gt;
	&lt;optgroup label=&quot;Attentive&quot;&gt;
		&lt;option value=&quot;57543&quot;&gt;Eye blocked&lt;/option&gt;
		&lt;option value=&quot;57588&quot;&gt;Warning&lt;/option&gt;
		&lt;option value=&quot;57590&quot;&gt;Question&lt;/option&gt;
		&lt;option value=&quot;57591&quot;&gt;Info&lt;/option&gt;
		&lt;option value=&quot;57592&quot;&gt;Info 2&lt;/option&gt;
		&lt;option value=&quot;57593&quot;&gt;Blocked&lt;/option&gt;
		&lt;option value=&quot;57596&quot;&gt;Spam&lt;/option&gt;
	&lt;/optgroup&gt;
	&lt;optgroup label=&quot;Multimedia Icons&quot;&gt;
		&lt;option value=&quot;57356&quot;&gt;Image&lt;/option&gt;
		&lt;option value=&quot;57357&quot;&gt;Image 2&lt;/option&gt;
		&lt;option value=&quot;57362&quot;&gt;Play&lt;/option&gt;
		&lt;option value=&quot;57363&quot;&gt;Film&lt;/option&gt;
		&lt;option value=&quot;57448&quot;&gt;Forward&lt;/option&gt;
		&lt;option value=&quot;57485&quot;&gt;Equalizer&lt;/option&gt;
		&lt;option value=&quot;57547&quot;&gt;Brightness medium&lt;/option&gt;
		&lt;option value=&quot;57548&quot;&gt;Brightness contrast&lt;/option&gt;
		&lt;option value=&quot;57549&quot;&gt;Contrast&lt;/option&gt;
		&lt;option value=&quot;57605&quot;&gt;Play 2&lt;/option&gt;
		&lt;option value=&quot;57606&quot;&gt;Pause&lt;/option&gt;
		&lt;option value=&quot;57609&quot;&gt;Forward 2&lt;/option&gt;
		&lt;option value=&quot;57610&quot;&gt;Play 3&lt;/option&gt;
		&lt;option value=&quot;57611&quot;&gt;Pause 2&lt;/option&gt;
		&lt;option value=&quot;57614&quot;&gt;Forward 3&lt;/option&gt;
		&lt;option value=&quot;57617&quot;&gt;Previous&lt;/option&gt;
		&lt;option value=&quot;57618&quot;&gt;Next&lt;/option&gt;
		&lt;option value=&quot;57620&quot;&gt;Volume high&lt;/option&gt;
		&lt;option value=&quot;57621&quot;&gt;Volume medium&lt;/option&gt;
		&lt;option value=&quot;57622&quot;&gt;Volume low&lt;/option&gt;
		&lt;option value=&quot;57623&quot;&gt;Volume mute&lt;/option&gt;
		&lt;option value=&quot;57624&quot;&gt;Volume mute 2&lt;/option&gt;
		&lt;option value=&quot;57625&quot;&gt;Volume increase&lt;/option&gt;
		&lt;option value=&quot;57626&quot;&gt;Volume decrease&lt;/option&gt;
	&lt;/optgroup&gt;
	&lt;optgroup label=&quot;Location and Contact&quot;&gt;
		&lt;option value=&quot;57344&quot;&gt;Home&lt;/option&gt;
		&lt;option value=&quot;57345&quot;&gt;Home 2&lt;/option&gt;
		&lt;option value=&quot;57346&quot;&gt;Home 3&lt;/option&gt;
		&lt;option value=&quot;57404&quot;&gt;Phone&lt;/option&gt;
		&lt;option value=&quot;57405&quot;&gt;Phone hang up&lt;/option&gt;
		&lt;option value=&quot;57408&quot;&gt;Envelope&lt;/option&gt;
		&lt;option value=&quot;57410&quot;&gt;Location&lt;/option&gt;
		&lt;option value=&quot;57411&quot;&gt;Location 2&lt;/option&gt;
		&lt;option value=&quot;57413&quot;&gt;Map&lt;/option&gt;
		&lt;option value=&quot;57414&quot;&gt;Map 2&lt;/option&gt;
		&lt;option value=&quot;57540&quot;&gt;Flag&lt;/option&gt;
	&lt;/optgroup&gt;
	&lt;optgroup label=&quot;Date and Time&quot;&gt;
		&lt;option value=&quot;57415&quot;&gt;History&lt;/option&gt;
		&lt;option value=&quot;57416&quot;&gt;Clock&lt;/option&gt;
		&lt;option value=&quot;57417&quot;&gt;Clock 2&lt;/option&gt;
		&lt;option value=&quot;57421&quot;&gt;Stopwatch&lt;/option&gt;
		&lt;option value=&quot;57422&quot;&gt;Calendar&lt;/option&gt;
		&lt;option value=&quot;57423&quot;&gt;Calendar 2&lt;/option&gt;
	&lt;/optgroup&gt;
	&lt;optgroup label=&quot;Devices&quot;&gt;
		&lt;option value=&quot;57359&quot;&gt;Camera&lt;/option&gt;
		&lt;option value=&quot;57361&quot;&gt;Headphones&lt;/option&gt;
		&lt;option value=&quot;57364&quot;&gt;Camera 2&lt;/option&gt;
		&lt;option value=&quot;57425&quot;&gt;Keyboard&lt;/option&gt;
		&lt;option value=&quot;57426&quot;&gt;Screen&lt;/option&gt;
		&lt;option value=&quot;57430&quot;&gt;Tablet&lt;/option&gt;
	&lt;/optgroup&gt;
	&lt;optgroup label=&quot;Tools&quot;&gt;
		&lt;option value=&quot;57349&quot;&gt;Pencil&lt;/option&gt;
		&lt;option value=&quot;57350&quot;&gt;Pencil 2&lt;/option&gt;
		&lt;option value=&quot;57352&quot;&gt;Pen&lt;/option&gt;
		&lt;option value=&quot;57355&quot;&gt;Paint format&lt;/option&gt;
		&lt;option value=&quot;57365&quot;&gt;Dice&lt;/option&gt;
		&lt;option value=&quot;57478&quot;&gt;Key&lt;/option&gt;
		&lt;option value=&quot;57479&quot;&gt;Key 2&lt;/option&gt;
		&lt;option value=&quot;57480&quot;&gt;Lock&lt;/option&gt;
		&lt;option value=&quot;57481&quot;&gt;Lock 2&lt;/option&gt;
		&lt;option value=&quot;57482&quot;&gt;Unlocked&lt;/option&gt;
		&lt;option value=&quot;57483&quot;&gt;Wrench&lt;/option&gt;
		&lt;option value=&quot;57486&quot;&gt;Cog&lt;/option&gt;
		&lt;option value=&quot;57487&quot;&gt;Cogs&lt;/option&gt;
		&lt;option value=&quot;57488&quot;&gt;Cog 2&lt;/option&gt;
		&lt;option value=&quot;57663&quot;&gt;Filter&lt;/option&gt;
		&lt;option value=&quot;57664&quot;&gt;Filter 2&lt;/option&gt;
	&lt;/optgroup&gt;
	&lt;optgroup label=&quot;Social and Networking&quot;&gt;
		&lt;option value=&quot;57694&quot;&gt;Share&lt;/option&gt;
		&lt;option value=&quot;57700&quot;&gt;Googleplus&lt;/option&gt;
		&lt;option value=&quot;57701&quot;&gt;Googleplus 2&lt;/option&gt;
		&lt;option value=&quot;57702&quot;&gt;Googleplus 3&lt;/option&gt;
		&lt;option value=&quot;57703&quot;&gt;Googleplus 4&lt;/option&gt;
		&lt;option value=&quot;57704&quot;&gt;Google drive&lt;/option&gt;
		&lt;option value=&quot;57705&quot;&gt;Facebook&lt;/option&gt;
		&lt;option value=&quot;57706&quot;&gt;Facebook 2&lt;/option&gt;
		&lt;option value=&quot;57707&quot;&gt;Facebook 3&lt;/option&gt;
		&lt;option value=&quot;57709&quot;&gt;Twitter&lt;/option&gt;
		&lt;option value=&quot;57710&quot;&gt;Twitter 2&lt;/option&gt;
		&lt;option value=&quot;57711&quot;&gt;Twitter 3&lt;/option&gt;
		&lt;option value=&quot;57717&quot;&gt;Vimeo&lt;/option&gt;
		&lt;option value=&quot;57718&quot;&gt;Vimeo 2&lt;/option&gt;
		&lt;option value=&quot;57719&quot;&gt;Vimeo 3&lt;/option&gt;
		&lt;option value=&quot;57736&quot;&gt;Github&lt;/option&gt;
		&lt;option value=&quot;57737&quot;&gt;Github 2&lt;/option&gt;
		&lt;option value=&quot;57738&quot;&gt;Github 3&lt;/option&gt;
		&lt;option value=&quot;57739&quot;&gt;Github 4&lt;/option&gt;
		&lt;option value=&quot;57740&quot;&gt;Github 5&lt;/option&gt;
		&lt;option value=&quot;57741&quot;&gt;Wordpress&lt;/option&gt;
		&lt;option value=&quot;57742&quot;&gt;Wordpress 2&lt;/option&gt;
		&lt;option value=&quot;57746&quot;&gt;Tumblr&lt;/option&gt;
		&lt;option value=&quot;57747&quot;&gt;Tumblr 2&lt;/option&gt;
		&lt;option value=&quot;57748&quot;&gt;Yahoo&lt;/option&gt;
		&lt;option value=&quot;57755&quot;&gt;Soundcloud&lt;/option&gt;
		&lt;option value=&quot;57756&quot;&gt;Soundcloud 2&lt;/option&gt;
		&lt;option value=&quot;57758&quot;&gt;Reddit&lt;/option&gt;
		&lt;option value=&quot;57759&quot;&gt;Linkedin&lt;/option&gt;
		&lt;option value=&quot;57760&quot;&gt;Lastfm&lt;/option&gt;
		&lt;option value=&quot;57761&quot;&gt;Lastfm 2&lt;/option&gt;
		&lt;option value=&quot;57763&quot;&gt;Stumbleupon&lt;/option&gt;
		&lt;option value=&quot;57764&quot;&gt;Stumbleupon 2&lt;/option&gt;
		&lt;option value=&quot;57765&quot;&gt;Stackoverflow&lt;/option&gt;
		&lt;option value=&quot;57766&quot;&gt;Pinterest&lt;/option&gt;
		&lt;option value=&quot;57767&quot;&gt;Pinterest 2&lt;/option&gt;
		&lt;option value=&quot;57776&quot;&gt;Yelp&lt;/option&gt;
	&lt;/optgroup&gt;
	&lt;optgroup label=&quot;Brands&quot;&gt;
		&lt;option value=&quot;57743&quot;&gt;Joomla&lt;/option&gt;
		&lt;option value=&quot;57750&quot;&gt;Apple&lt;/option&gt;
		&lt;option value=&quot;57751&quot;&gt;Finder&lt;/option&gt;
		&lt;option value=&quot;57752&quot;&gt;Android&lt;/option&gt;
		&lt;option value=&quot;57753&quot;&gt;Windows&lt;/option&gt;
		&lt;option value=&quot;57754&quot;&gt;Windows 8&lt;/option&gt;
		&lt;option value=&quot;57757&quot;&gt;Skype&lt;/option&gt;
		&lt;option value=&quot;57773&quot;&gt;Paypal&lt;/option&gt;
		&lt;option value=&quot;57774&quot;&gt;Paypal 2&lt;/option&gt;
		&lt;option value=&quot;57775&quot;&gt;Paypal 3&lt;/option&gt;
		&lt;option value=&quot;57789&quot;&gt;Chrome&lt;/option&gt;
		&lt;option value=&quot;57790&quot;&gt;Firefox&lt;/option&gt;
		&lt;option value=&quot;57792&quot;&gt;Opera&lt;/option&gt;
		&lt;option value=&quot;57793&quot;&gt;Safari&lt;/option&gt;
	&lt;/optgroup&gt;
	&lt;optgroup label=&quot;Files &amp; Documents&quot;&gt;
		&lt;option value=&quot;57378&quot;&gt;File&lt;/option&gt;
		&lt;option value=&quot;57380&quot;&gt;File 2&lt;/option&gt;
		&lt;option value=&quot;57381&quot;&gt;File 3&lt;/option&gt;
		&lt;option value=&quot;57382&quot;&gt;File 4&lt;/option&gt;
		&lt;option value=&quot;57390&quot;&gt;Folder&lt;/option&gt;
		&lt;option value=&quot;57391&quot;&gt;Folder open&lt;/option&gt;
		&lt;option value=&quot;57778&quot;&gt;File pdf&lt;/option&gt;
		&lt;option value=&quot;57779&quot;&gt;File openoffice&lt;/option&gt;
		&lt;option value=&quot;57780&quot;&gt;File word&lt;/option&gt;
		&lt;option value=&quot;57781&quot;&gt;File excel&lt;/option&gt;
		&lt;option value=&quot;57782&quot;&gt;File zip&lt;/option&gt;
		&lt;option value=&quot;57783&quot;&gt;File powerpoint&lt;/option&gt;
		&lt;option value=&quot;57784&quot;&gt;File xml&lt;/option&gt;
		&lt;option value=&quot;57785&quot;&gt;File css&lt;/option&gt;
		&lt;option value=&quot;57786&quot;&gt;Html 5&lt;/option&gt;
		&lt;option value=&quot;57787&quot;&gt;Html 52&lt;/option&gt;
	&lt;/optgroup&gt;
	&lt;optgroup label=&quot;Like &amp; Dislike Icons&quot;&gt;
		&lt;option value=&quot;57542&quot;&gt;Eye&lt;/option&gt;
		&lt;option value=&quot;57544&quot;&gt;Eye 2&lt;/option&gt;
		&lt;option value=&quot;57550&quot;&gt;Star&lt;/option&gt;
		&lt;option value=&quot;57551&quot;&gt;Star 2&lt;/option&gt;
		&lt;option value=&quot;57552&quot;&gt;Star 3&lt;/option&gt;
		&lt;option value=&quot;57553&quot;&gt;Heart&lt;/option&gt;
		&lt;option value=&quot;57554&quot;&gt;Heart 2&lt;/option&gt;
		&lt;option value=&quot;57555&quot;&gt;Heart broken&lt;/option&gt;
		&lt;option value=&quot;57556&quot;&gt;Thumbs up&lt;/option&gt;
		&lt;option value=&quot;57557&quot;&gt;Thumbs up 2&lt;/option&gt;
	&lt;/optgroup&gt;
	&lt;optgroup label=&quot;Emoticons&quot;&gt;
		&lt;option value=&quot;57558&quot;&gt;Happy&lt;/option&gt;
		&lt;option value=&quot;57559&quot;&gt;Happy 2&lt;/option&gt;
		&lt;option value=&quot;57560&quot;&gt;Smiley&lt;/option&gt;
		&lt;option value=&quot;57561&quot;&gt;Smiley 2&lt;/option&gt;
		&lt;option value=&quot;57562&quot;&gt;Tongue&lt;/option&gt;
		&lt;option value=&quot;57563&quot;&gt;Tongue 2&lt;/option&gt;
		&lt;option value=&quot;57564&quot;&gt;Sad&lt;/option&gt;
		&lt;option value=&quot;57565&quot;&gt;Sad 2&lt;/option&gt;
		&lt;option value=&quot;57566&quot;&gt;Wink&lt;/option&gt;
		&lt;option value=&quot;57567&quot;&gt;Wink 2&lt;/option&gt;
		&lt;option value=&quot;57568&quot;&gt;Grin&lt;/option&gt;
		&lt;option value=&quot;57569&quot;&gt;Grin 2&lt;/option&gt;
		&lt;option value=&quot;57570&quot;&gt;Cool&lt;/option&gt;
		&lt;option value=&quot;57571&quot;&gt;Cool 2&lt;/option&gt;
		&lt;option value=&quot;57572&quot;&gt;Angry&lt;/option&gt;
		&lt;option value=&quot;57573&quot;&gt;Angry 2&lt;/option&gt;
		&lt;option value=&quot;57574&quot;&gt;Evil&lt;/option&gt;
		&lt;option value=&quot;57575&quot;&gt;Evil 2&lt;/option&gt;
		&lt;option value=&quot;57576&quot;&gt;Shocked&lt;/option&gt;
		&lt;option value=&quot;57577&quot;&gt;Shocked 2&lt;/option&gt;
		&lt;option value=&quot;57578&quot;&gt;Confused&lt;/option&gt;
		&lt;option value=&quot;57579&quot;&gt;Confused 2&lt;/option&gt;
		&lt;option value=&quot;57580&quot;&gt;Neutral&lt;/option&gt;
		&lt;option value=&quot;57581&quot;&gt;Neutral 2&lt;/option&gt;
		&lt;option value=&quot;57582&quot;&gt;Wondering&lt;/option&gt;
		&lt;option value=&quot;57583&quot;&gt;Wondering 2&lt;/option&gt;
	&lt;/optgroup&gt;
	&lt;optgroup label=&quot;Directional Icons&quot;&gt;
		&lt;option value=&quot;57584&quot;&gt;Point up&lt;/option&gt;
		&lt;option value=&quot;57585&quot;&gt;Point right&lt;/option&gt;
		&lt;option value=&quot;57586&quot;&gt;Point down&lt;/option&gt;
		&lt;option value=&quot;57587&quot;&gt;Point left&lt;/option&gt;
		&lt;option value=&quot;57631&quot;&gt;Arrow up left&lt;/option&gt;
		&lt;option value=&quot;57632&quot;&gt;Arrow up&lt;/option&gt;
		&lt;option value=&quot;57633&quot;&gt;Arrow up right&lt;/option&gt;
		&lt;option value=&quot;57634&quot;&gt;Arrow right&lt;/option&gt;
		&lt;option value=&quot;57635&quot;&gt;Arrow down right&lt;/option&gt;
		&lt;option value=&quot;57636&quot;&gt;Arrow down&lt;/option&gt;
		&lt;option value=&quot;57637&quot;&gt;Arrow down left&lt;/option&gt;
		&lt;option value=&quot;57638&quot;&gt;Arrow left&lt;/option&gt;
		&lt;option value=&quot;57639&quot;&gt;Arrow up left 2&lt;/option&gt;
		&lt;option value=&quot;57640&quot;&gt;Arrow up 2&lt;/option&gt;
		&lt;option value=&quot;57641&quot;&gt;Arrow up right 2&lt;/option&gt;
		&lt;option value=&quot;57642&quot;&gt;Arrow right 2&lt;/option&gt;
		&lt;option value=&quot;57643&quot;&gt;Arrow down right 2&lt;/option&gt;
		&lt;option value=&quot;57644&quot;&gt;Arrow down 2&lt;/option&gt;
		&lt;option value=&quot;57645&quot;&gt;Arrow down left 2&lt;/option&gt;
		&lt;option value=&quot;57646&quot;&gt;Arrow left 2&lt;/option&gt;
		&lt;option value=&quot;57647&quot;&gt;Arrow up left 3&lt;/option&gt;
		&lt;option value=&quot;57648&quot;&gt;Arrow up 3&lt;/option&gt;
		&lt;option value=&quot;57649&quot;&gt;Arrow up right 3&lt;/option&gt;
		&lt;option value=&quot;57650&quot;&gt;Arrow right 3&lt;/option&gt;
		&lt;option value=&quot;57651&quot;&gt;Arrow down right 3&lt;/option&gt;
		&lt;option value=&quot;57652&quot;&gt;Arrow down 3&lt;/option&gt;
		&lt;option value=&quot;57653&quot;&gt;Arrow down left 3&lt;/option&gt;
		&lt;option value=&quot;57654&quot;&gt;Arrow left 3&lt;/option&gt;
	&lt;/optgroup&gt;
	&lt;optgroup label=&quot;Other Icons&quot;&gt;
		&lt;option value=&quot;57351&quot;&gt;Quill&lt;/option&gt;
		&lt;option value=&quot;57353&quot;&gt;Blog&lt;/option&gt;
		&lt;option value=&quot;57354&quot;&gt;Droplet&lt;/option&gt;
		&lt;option value=&quot;57358&quot;&gt;Images&lt;/option&gt;
		&lt;option value=&quot;57360&quot;&gt;Music&lt;/option&gt;
		&lt;option value=&quot;57366&quot;&gt;Pacman&lt;/option&gt;
		&lt;option value=&quot;57367&quot;&gt;Spades&lt;/option&gt;
		&lt;option value=&quot;57368&quot;&gt;Clubs&lt;/option&gt;
		&lt;option value=&quot;57369&quot;&gt;Diamonds&lt;/option&gt;
		&lt;option value=&quot;57370&quot;&gt;Pawn&lt;/option&gt;
		&lt;option value=&quot;57371&quot;&gt;Bullhorn&lt;/option&gt;
		&lt;option value=&quot;57372&quot;&gt;Connection&lt;/option&gt;
		&lt;option value=&quot;57373&quot;&gt;Podcast&lt;/option&gt;
		&lt;option value=&quot;57374&quot;&gt;Feed&lt;/option&gt;
		&lt;option value=&quot;57389&quot;&gt;Stack&lt;/option&gt;
		&lt;option value=&quot;57393&quot;&gt;Tags&lt;/option&gt;
		&lt;option value=&quot;57394&quot;&gt;Barcode&lt;/option&gt;
		&lt;option value=&quot;57395&quot;&gt;Qrcode&lt;/option&gt;
		&lt;option value=&quot;57396&quot;&gt;Ticket&lt;/option&gt;
		&lt;option value=&quot;57400&quot;&gt;Coin&lt;/option&gt;
		&lt;option value=&quot;57401&quot;&gt;Credit&lt;/option&gt;
		&lt;option value=&quot;57407&quot;&gt;Notebook&lt;/option&gt;
		&lt;option value=&quot;57409&quot;&gt;Pushpin&lt;/option&gt;
		&lt;option value=&quot;57412&quot;&gt;Compass&lt;/option&gt;
		&lt;option value=&quot;57418&quot;&gt;Alarm&lt;/option&gt;
		&lt;option value=&quot;57419&quot;&gt;Alarm 2&lt;/option&gt;
		&lt;option value=&quot;57420&quot;&gt;Bell&lt;/option&gt;
		&lt;option value=&quot;57424&quot;&gt;Print&lt;/option&gt;
		&lt;option value=&quot;57427&quot;&gt;Laptop&lt;/option&gt;
		&lt;option value=&quot;57428&quot;&gt;Mobile&lt;/option&gt;
		&lt;option value=&quot;57429&quot;&gt;Mobile 2&lt;/option&gt;
		&lt;option value=&quot;57431&quot;&gt;Tv&lt;/option&gt;
		&lt;option value=&quot;57440&quot;&gt;Disk&lt;/option&gt;
		&lt;option value=&quot;57441&quot;&gt;Storage&lt;/option&gt;
		&lt;option value=&quot;57449&quot;&gt;Reply&lt;/option&gt;
		&lt;option value=&quot;57451&quot;&gt;Bubbles&lt;/option&gt;
		&lt;option value=&quot;57452&quot;&gt;Bubbles 2&lt;/option&gt;
		&lt;option value=&quot;57454&quot;&gt;Bubbles 3&lt;/option&gt;
		&lt;option value=&quot;57455&quot;&gt;Bubbles 4&lt;/option&gt;
		&lt;option value=&quot;57457&quot;&gt;Users&lt;/option&gt;
		&lt;option value=&quot;57459&quot;&gt;Users 2&lt;/option&gt;
		&lt;option value=&quot;57462&quot;&gt;Quotes left&lt;/option&gt;
		&lt;option value=&quot;57464&quot;&gt;Spinner&lt;/option&gt;
		&lt;option value=&quot;57465&quot;&gt;Spinner 2&lt;/option&gt;
		&lt;option value=&quot;57466&quot;&gt;Spinner 3&lt;/option&gt;
		&lt;option value=&quot;57467&quot;&gt;Spinner 4&lt;/option&gt;
		&lt;option value=&quot;57468&quot;&gt;Spinner 5&lt;/option&gt;
		&lt;option value=&quot;57469&quot;&gt;Spinner 6&lt;/option&gt;
		&lt;option value=&quot;57470&quot;&gt;Binoculars&lt;/option&gt;
		&lt;option value=&quot;57471&quot;&gt;Search&lt;/option&gt;
		&lt;option value=&quot;57489&quot;&gt;Hammer&lt;/option&gt;
		&lt;option value=&quot;57490&quot;&gt;Wand&lt;/option&gt;
		&lt;option value=&quot;57491&quot;&gt;Aid&lt;/option&gt;
		&lt;option value=&quot;57492&quot;&gt;Bug&lt;/option&gt;
		&lt;option value=&quot;57494&quot;&gt;Stats&lt;/option&gt;
		&lt;option value=&quot;57495&quot;&gt;Bars&lt;/option&gt;
		&lt;option value=&quot;57496&quot;&gt;Bars 2&lt;/option&gt;
		&lt;option value=&quot;57497&quot;&gt;Gift&lt;/option&gt;
		&lt;option value=&quot;57498&quot;&gt;Trophy&lt;/option&gt;
		&lt;option value=&quot;57499&quot;&gt;Glass&lt;/option&gt;
		&lt;option value=&quot;57500&quot;&gt;Mug&lt;/option&gt;
		&lt;option value=&quot;57501&quot;&gt;Food&lt;/option&gt;
		&lt;option value=&quot;57502&quot;&gt;Leaf&lt;/option&gt;
		&lt;option value=&quot;57503&quot;&gt;Rocket&lt;/option&gt;
		&lt;option value=&quot;57504&quot;&gt;Meter&lt;/option&gt;
		&lt;option value=&quot;57505&quot;&gt;Meter 2&lt;/option&gt;
		&lt;option value=&quot;57506&quot;&gt;Dashboard&lt;/option&gt;
		&lt;option value=&quot;57507&quot;&gt;Hammer 2&lt;/option&gt;
		&lt;option value=&quot;57508&quot;&gt;Fire&lt;/option&gt;
		&lt;option value=&quot;57509&quot;&gt;Lab&lt;/option&gt;
		&lt;option value=&quot;57510&quot;&gt;Magnet&lt;/option&gt;
		&lt;option value=&quot;57511&quot;&gt;Remove&lt;/option&gt;
		&lt;option value=&quot;57512&quot;&gt;Remove 2&lt;/option&gt;
		&lt;option value=&quot;57513&quot;&gt;Briefcase&lt;/option&gt;
		&lt;option value=&quot;57514&quot;&gt;Airplane&lt;/option&gt;
		&lt;option value=&quot;57515&quot;&gt;Truck&lt;/option&gt;
		&lt;option value=&quot;57516&quot;&gt;Road&lt;/option&gt;
		&lt;option value=&quot;57517&quot;&gt;Accessibility&lt;/option&gt;
		&lt;option value=&quot;57518&quot;&gt;Target&lt;/option&gt;
		&lt;option value=&quot;57519&quot;&gt;Shield&lt;/option&gt;
		&lt;option value=&quot;57520&quot;&gt;Lightning&lt;/option&gt;
		&lt;option value=&quot;57521&quot;&gt;Switch&lt;/option&gt;
		&lt;option value=&quot;57522&quot;&gt;Powercord&lt;/option&gt;
		&lt;option value=&quot;57523&quot;&gt;Signup&lt;/option&gt;
		&lt;option value=&quot;57529&quot;&gt;Tree&lt;/option&gt;
		&lt;option value=&quot;57530&quot;&gt;Cloud&lt;/option&gt;
		&lt;option value=&quot;57538&quot;&gt;Earth&lt;/option&gt;
		&lt;option value=&quot;57546&quot;&gt;Bookmarks&lt;/option&gt;
		&lt;option value=&quot;57589&quot;&gt;Notification&lt;/option&gt;
		&lt;option value=&quot;57597&quot;&gt;Close&lt;/option&gt;
	&lt;/optgroup&gt;
&lt;/select&gt;
										</pre>
									</div>
									<div class="tab-pane fade" id="e2_js">
										<pre class="brush: js">
jQuery(document).ready(function($) {

	/**
	 * Example 2
	 * Load from SELECT with optgroup for auto categorizing
	 */
	$(&#039;#e2_element&#039;).fontIconPicker({
		useAttribute: true,
		theme: &#039;fip-bootstrap&#039;,
		attributeName: &#039;data-icomoon&#039;
	});

});
										</pre>
									</div>
								</div>
							</div>
						</article>

						<!-- Example 3 -->
						<article id="e3" class="tab-pane fade">
							<p>
								You can of course trigger fontIconPicker on an <code>INPUT[type=&quot;text&quot;]</code> field, loading the icon set through the <em>source</em> option.
							</p>
							<div class="live-preview">
								<input type="text" id="e3_element" name="e3_element" />
							</div>
							<div class="example-code">
								<ul class="nav nav-tabs">
									<li class="active"><a href="#e3_html" data-toggle="tab">HTML</a></li>
									<li><a href="#e3_js" data-toggle="tab">JavaScript</a></li>
								</ul>
								<div class="tab-content">
									<div class="tab-pane in fade active" id="e3_html">
										<pre class="brush: html">
&lt;input type=&quot;text&quot; id=&quot;e3_element&quot; name=&quot;e3_element&quot; /&gt;
										</pre>
									</div>
									<div class="tab-pane fade" id="e3_js">
										<pre class="brush: js">
jQuery(document).ready(function($) {

	/**
	 * Example 3
	 * Load from INPUT text field with simple source
	 */
	$(&#039;#e3_element&#039;).fontIconPicker({
		source: fnt_icons,
		theme: &#039;fip-darkgrey&#039;
	});

});
										</pre>
									</div>
								</div>
							</div>
						</article>

						<!-- Example 4 -->
						<article id="e4" class="tab-pane fade">
							<p>
								You can pass an <code>object</code> to the source option to categorize the icons.
							</p>
							<div class="live-preview">
								<input type="text" id="e4_element" name="e4_element" />
							</div>
							<div class="example-code">
								<ul class="nav nav-tabs">
									<li class="active"><a href="#e4_html" data-toggle="tab">HTML</a></li>
									<li><a href="#e4_js" data-toggle="tab">JavaScript</a></li>
								</ul>
								<div class="tab-content">
									<div class="tab-pane in fade active" id="e4_html">
										<pre class="brush: html">
&lt;input type=&quot;text&quot; id=&quot;e4_element&quot; name=&quot;e4_element&quot; /&gt;
										</pre>
									</div>
									<div class="tab-pane fade" id="e4_js">
										<pre class="brush: js">
jQuery(document).ready(function($) {

	/**
	 * Example 4
	 * Load from INPUT text field with categorized source
	 */
	$(&#039;#e4_element&#039;).fontIconPicker({
		source: fnt_icons_categorized,
		theme: &#039;fip-bootstrap&#039;
	});

});
										</pre>
									</div>
								</div>
							</div>
						</article>

						<!-- Example 5 -->
						<article id="e5" class="tab-pane fade">
							<p>Pass <code>searchSource</code> option to give manual search strings for icons. The <code>searchSource</code> should be of the same format (i.e, either <code>Array</code> or <code>Object</code>) and order of the <code>source</code> option.</p>
							<div class="live-preview">
								<input type="text" id="e5_element" name="e5_element" />
							</div>
							<p>This example uses <code>useAttribute</code> to enable attribute selector for printing fonts. Also in accordance with the font stylesheet, the attribute name has been changed to <code>data-icomoon</code>.</p>
							<div class="example-code">
								<ul class="nav nav-tabs">
									<li class="active"><a href="#e5_html" data-toggle="tab">HTML</a></li>
									<li><a href="#e5_js" data-toggle="tab">JavaScript</a></li>
								</ul>
								<div class="tab-content">
									<div class="tab-pane in fade active" id="e5_html">
										<pre class="brush: html">
&lt;input type=&quot;text&quot; id=&quot;e5_element&quot; name=&quot;e5_element&quot; /&gt;
										</pre>
									</div>
									<div class="tab-pane fade" id="e5_js">
										<pre class="brush: js">
jQuery(document).ready(function($) {

	/**
	 * Example 5
	 * Load with custom search and attribute selector
	 */

	$(&#039;#e5_element&#039;).fontIconPicker({
		source: icm_icons_2,
		searchSource: icm_icon_search_2,
		useAttribute: true,
		attributeName: &#039;data-icomoon&#039;,
		theme: &#039;fip-bootstrap&#039;
	});

});
										</pre>
									</div>
								</div>
							</div>
						</article>

						<!-- Example 6 -->
						<article id="e6" class="tab-pane fade">
							<p>You can change icons on the fly using the <a href="#plugin-apis"><em>setIcons</em></a> API.</p>
							<div class="live-preview">
								<input type="text" id="e6_element" name="e6_element" />
								<span id="e6_buttons">
									<button type="button" class="btn btn-primary set_all">All Icons</button>
									<button type="button" class="btn btn-default set_cat">Categorized Icons</button>
									<button type="button" class="btn btn-default set_1">Set 1</button>
									<button type="button" class="btn btn-default set_2">Set 2</button>
								</span>
							</div>
							<p>Do note that we are doing a <code>e.stopPropagation();</code> on button clicks to stop the event migrate back to the document. This prevents the font picker from being closed automatically when the change icon buttons are clicked.</p>
							<div class="example-code">
								<ul class="nav nav-tabs">
									<li class="active"><a href="#e6_html" data-toggle="tab">HTML</a></li>
									<li><a href="#e6_js" data-toggle="tab">JavaScript</a></li>
								</ul>
								<div class="tab-content">
									<div class="tab-pane in fade active" id="e6_html">
										<pre class="brush: js">
&lt;input type=&quot;text&quot; id=&quot;e6_element&quot; name=&quot;e6_element&quot; /&gt;
&lt;span id=&quot;e6_buttons&quot;&gt;
	&lt;button type=&quot;button&quot; class=&quot;btn btn-primary set_all&quot;&gt;All Icons&lt;/button&gt;
	&lt;button type=&quot;button&quot; class=&quot;btn btn-default set_cat&quot;&gt;Categorized Icons&lt;/button&gt;
	&lt;button type=&quot;button&quot; class=&quot;btn btn-default set_1&quot;&gt;Set 1&lt;/button&gt;
	&lt;button type=&quot;button&quot; class=&quot;btn btn-default set_2&quot;&gt;Set 2&lt;/button&gt;
&lt;/span&gt;
										</pre>
									</div>
									<div class="tab-pane fade" id="e6_js">
										<pre class="brush: js">
jQuery(document).ready(function($) {

	/**
	 * Example 6
	 * Change icon set on the fly
	 */

	// Init the picker
	var e6_element = $(&#039;#e6_element&#039;).fontIconPicker({
		source: fnt_icons,
		theme: &#039;fip-darkgrey&#039;
	});

	// Bind the click event on the buttons
	$(&#039;#e6_buttons&#039;).on(&#039;click&#039;, &#039;button&#039;, function(e) {
		e.preventDefault();

		// First change classes of every buttons
		$(&#039;#e6_buttons&#039;).find(&#039;button&#039;).removeClass(&#039;btn-primary&#039;).addClass(&#039;btn-default&#039;);

		// Change the icon according to which button was clicked
		var _self = $(this);

		// If all
		if ( _self.hasClass(&#039;set_all&#039;) ) {
			e6_element.setIcons(fnt_icons);
		// If categorized
		} else if ( _self.hasClass(&#039;set_cat&#039;) ) {
			e6_element.setIcons(fnt_icons_categorized);
		// If set one
		} else if ( _self.hasClass(&#039;set_1&#039;) ) {
			e6_element.setIcons(fnt_icons_1);
		// If set two
		} else {
			e6_element.setIcons(fnt_icons_2);
		}

		// Change the appearance
		_self.removeClass(&#039;btn-default&#039;).addClass(&#039;btn-primary&#039;);

		// Stop propagation to prevent event bubbling
		// We could&#039;ve also done return false, but it is deprecated now
		e.stopPropagation();
	});
});
										</pre>
									</div>
								</div>
							</div>
						</article>

						<!-- Example 7 -->
						<article id="e7" class="tab-pane fade">
							<p>In this example we're going to disable search and the ability to leave fontIconPicker empty.</p>
							<div class="live-preview">
								<input type="text" id="e7_element" name="e7_element" />
							</div>
							<div class="example-code">
								<ul class="nav nav-tabs">
									<li class="active"><a href="#e7_html" data-toggle="tab">HTML</a></li>
									<li><a href="#e7_js" data-toggle="tab">JavaScript</a></li>
								</ul>
								<div class="tab-content">
									<div class="tab-pane in fade active" id="e7_html">
										<pre class="brush: html">
&lt;input type=&quot;text&quot; id=&quot;e7_element&quot; name=&quot;e7_element&quot; /&gt;
										</pre>
									</div>
									<div class="tab-pane fade" id="e7_js">
										<pre class="brush: js">
jQuery(document).ready(function($) {

	/**
	 * Example 7
	 * No empty icons and no search
	 */
	$(&#039;#e7_element&#039;).fontIconPicker({
		source: fnt_icons_categorized,
		emptyIcon: false,
		hasSearch: false
	});

});
										</pre>
									</div>
								</div>
							</div>
						</article>

						<!-- Example 8 -->
						<article id="e8" class="tab-pane fade">
							<p>Without having to manually populate fonts you can load them from a json file. Following an example using Fontello config.json file. fontIconPicker will be first instantiated with a loading icon, when AJAX does its thing icons will magically appears! If something goes wrong, before asking for help, remember <strong>CORS</strong>!!</p>
							<div class="live-preview">
								<input type="text" id="e8_element" name="e8_element" />
								<span id="e8_buttons">
									<button autocomplete="off" type="button" class="btn btn-primary">Load from Fontello config.json</button>
								</span>
							</div>
							<div class="example-code">
								<ul class="nav nav-tabs">
									<li class="active"><a href="#e8_html" data-toggle="tab">HTML</a></li>
									<li><a href="#e8_js" data-toggle="tab">JavaScript</a></li>
								</ul>
								<div class="tab-content">
									<div class="tab-pane in fade active" id="e8_html">
										<pre class="brush: html">
&lt;input type=&quot;text&quot; id=&quot;e8_element&quot; name=&quot;e8_element&quot; /&gt;
&lt;span id=&quot;e8_buttons&quot;&gt;
	&lt;button autocomplete=&quot;off&quot; type=&quot;button&quot; class=&quot;btn btn-primary&quot;&gt;Load from Fontello config.json&lt;/button&gt;
&lt;/span&gt;
										</pre>
									</div>
									<div class="tab-pane fade" id="e8_js">
										<pre class="brush: js">
jQuery(document).ready(function($) {

	/**
	 * Example 8
	 * Load icons from Fontello JSON config file
	 */

	// Init the font icon picker
	var e8_element = $(&#039;#e8_element&#039;).fontIconPicker({
		theme: &#039;fip-bootstrap&#039;
	});

	// Add the event on the button
	$(&#039;#e8_buttons button&#039;).on(&#039;click&#039;, function(e) {
		e.preventDefault();

		// Show processing message
		$(this).prop(&#039;disabled&#039;, true).html(&#039;&lt;i class=&quot;icon-cog demo-animate-spin&quot;&gt;&lt;/i&gt; Please wait...&#039;);

		// Get the JSON file
		$.ajax({
			url: &#039;fontello-7275ca86/config.json&#039;,
			type: &#039;GET&#039;,
			dataType: &#039;json&#039;
		})
		.done(function(response) {

			var fontello_json_icons = [];

			// Push the fonts into the array
			$.each(response.glyphs, function(i, v) {
				fontello_json_icons.push( response.css_prefix_text + v.css );
			});

			// Set new fonts
			e8_element.setIcons(fontello_json_icons);

			// Show success message and disable
			$(&#039;#e8_buttons button&#039;).removeClass(&#039;btn-primary&#039;).addClass(&#039;btn-success&#039;).text(&#039;Successfully loaded icons&#039;).prop(&#039;disabled&#039;, true);

		})
		.fail(function() {
			// Show error message and enable
			$(&#039;#e8_buttons button&#039;).removeClass(&#039;btn-primary&#039;).addClass(&#039;btn-danger&#039;).text(&#039;Error: Try Again?&#039;).prop(&#039;disabled&#039;, false);
		});
		e.stopPropagation();
	});

});
										</pre>
									</div>
								</div>
							</div>
						</article>

						<!-- Example 9 -->
						<article id="e9" class="tab-pane fade">
							<p>Similar to before you can also load fonts from IcoMoon <code>selection.json</code> file. The examples are very similar with just the difference being the data format of the json file. We will also be joining the tags of the icons to create a different search set.</p>
							<div class="live-preview">
								<input type="text" id="e9_element" name="e9_element" />
								<span id="e9_buttons">
									<button autocomplete="off" type="button" class="btn btn-primary">Load from IcoMoon selection.json</button>
								</span>
							</div>
							<div class="example-code">
								<ul class="nav nav-tabs">
									<li class="active"><a href="#e9_html" data-toggle="tab">HTML</a></li>
									<li><a href="#e9_js" data-toggle="tab">JavaScript</a></li>
								</ul>
								<div class="tab-content">
									<div class="tab-pane in fade active" id="e9_html">
										<pre class="brush: html">
&lt;input type=&quot;text&quot; id=&quot;e9_element&quot; name=&quot;e9_element&quot; /&gt;
&lt;span id=&quot;e9_buttons&quot;&gt;
	&lt;button autocomplete=&quot;off&quot; type=&quot;button&quot; class=&quot;btn btn-primary&quot;&gt;Load from IcoMoon selection.json&lt;/button&gt;
&lt;/span&gt;
										</pre>
									</div>
									<div class="tab-pane fade" id="e9_js">
										<pre class="brush: js">
jQuery(document).ready(function($) {

	/**
	 * Example 9
	 * Load icons from icomoon JSON selections file
	 */

	// Init the font icon picker
	var e9_element = $(&#039;#e9_element&#039;).fontIconPicker({
		theme: &#039;fip-bootstrap&#039;
		});

	// Add the event on the button
	$(&#039;#e9_buttons button&#039;).on(&#039;click&#039;, function(e) {
		e.preventDefault();

		// Show processing message
		$(this).prop(&#039;disabled&#039;, true).html(&#039;&lt;i class=&quot;icon-cog demo-animate-spin&quot;&gt;&lt;/i&gt; Please wait...&#039;);

		// Get the JSON file
		$.ajax({
			url: &#039;icomoon/selection.json&#039;,
			type: &#039;GET&#039;,
			dataType: &#039;json&#039;
		})
		.done(function(response) {

			// Get the class prefix
			var classPrefix = response.preferences.fontPref.prefix,
				icomoon_json_icons = [],
				icomoon_json_search = [];

			// For each icon
			$.each(response.icons, function(i, v) {

				// Set the source
				icomoon_json_icons.push( classPrefix + v.properties.name );

				// Create and set the search source
				if ( v.icon &amp;&amp; v.icon.tags &amp;&amp; v.icon.tags.length ) {
					icomoon_json_search.push( v.properties.name + &#039; &#039; + v.icon.tags.join(&#039; &#039;) );
				} else {
					icomoon_json_search.push( v.properties.name );
				}
			});

			// Set new fonts on fontIconPicker
			e9_element.setIcons(icomoon_json_icons, icomoon_json_search);

			// Show success message and disable
			$(&#039;#e9_buttons button&#039;).removeClass(&#039;btn-primary&#039;).addClass(&#039;btn-success&#039;).text(&#039;Successfully loaded icons&#039;).prop(&#039;disabled&#039;, true);

		})
		.fail(function() {
			// Show error message and enable
			$(&#039;#e9_buttons button&#039;).removeClass(&#039;btn-primary&#039;).addClass(&#039;btn-danger&#039;).text(&#039;Error: Try Again?&#039;).prop(&#039;disabled&#039;, false);
		});
		e.stopPropagation();
	});
});
										</pre>
									</div>
								</div>
							</div>
						</article>

						<!-- Example 10 -->
						<article id="e10" class="tab-pane fade">
							<p><code>CHANGE</code> event is triggered on the element on icon change so you'll be able to trigger custom action each time an icon get selected.</p>
							<input type="text" class="trigger_change" id="e10_element_1" name="e10_element_1" />
							<span>Selected Icon: <span class="selected_icon text-danger"><i class="icon-block"></i></span></span>
							<input type="text" class="trigger_change" id="e10_element_2" name="e10_element_2" />
							<span>Selected Icon: <span class="selected_icon text-danger"><i class="icon-block"></i></span></span>
							<div class="example-code">
								<ul class="nav nav-tabs">
									<li class="active"><a href="#e10_html" data-toggle="tab">HTML</a></li>
									<li><a href="#e10_js" data-toggle="tab">JavaScript</a></li>
								</ul>
								<div class="tab-content">
									<div class="tab-pane in fade active" id="e10_html">
										<pre class="brush: html">
&lt;input type=&quot;text&quot; class=&quot;trigger_change&quot; id=&quot;e10_element_1&quot; name=&quot;e10_element_1&quot; /&gt;
&lt;span&gt;Selected Icon: &lt;span class=&quot;selected_icon text-danger&quot;&gt;&lt;i class=&quot;icon-block&quot;&gt;&lt;/i&gt;&lt;/span&gt;&lt;/span&gt;
&lt;input type=&quot;text&quot; class=&quot;trigger_change&quot; id=&quot;e10_element_2&quot; name=&quot;e10_element_2&quot; /&gt;
&lt;span&gt;Selected Icon: &lt;span class=&quot;selected_icon text-danger&quot;&gt;&lt;i class=&quot;icon-block&quot;&gt;&lt;/i&gt;&lt;/span&gt;&lt;/span&gt;
										</pre>
									</div>
									<div class="tab-pane fade" id="e10_js">
									<pre class="brush: js">

jQuery(document).ready(function($) {

	/**
	 * Example 10
	 * Trigger event on icon change
	 */

	// First icon picker with fontawesome
	$(&#039;#e10_element_1&#039;).fontIconPicker({
		theme: &#039;fip-darkgrey&#039;,
		source: fnt_icons_categorized
	}).on(&#039;change&#039;, function() {
		var nextSpan = $(this).next(&#039;span&#039;),
		iconToChange = nextSpan.find(&#039;.selected_icon&#039;),
		selectedIcon = $(this).val();
		if ( selectedIcon == &#039;&#039; ) {
			iconToChange.html(&#039;&lt;i class=&quot;icon-block&quot;&gt;&lt;/i&gt;&#039;);
			iconToChange.removeClass(&#039;text-primary&#039;).addClass(&#039;text-danger&#039;);
		} else {
			iconToChange.html(&#039;&lt;i class=&quot;&#039; + selectedIcon + &#039;&quot;&gt;&lt;/i&gt;&#039;);
			iconToChange.addClass(&#039;text-primary&#039;).removeClass(&#039;text-danger&#039;);
		}
	});

	// Second icon picker with icomoons and attributes
	$(&#039;#e10_element_2&#039;).fontIconPicker({
		theme: &#039;fip-bootstrap&#039;,
		source: icm_icons,
		searchSource: icm_icon_search,
		useAttribute: true,
		attributeName: &#039;data-icomoon&#039;
	}).on(&#039;change&#039;, function() {
		var nextSpan = $(this).next(&#039;span&#039;),
		iconToChange = nextSpan.find(&#039;.selected_icon&#039;),
		selectedIcon = $(this).val();
		if ( selectedIcon == &#039;&#039; ) {
			iconToChange.html(&#039;&lt;i class=&quot;icon-block&quot;&gt;&lt;/i&gt;&#039;);
			iconToChange.removeClass(&#039;text-primary&#039;).addClass(&#039;text-danger&#039;);
		} else {
			iconToChange.html(&#039;&lt;i data-icomoon=&quot;&amp;#x&#039; + parseInt(selectedIcon, 10).toString(16) + &#039;;&quot;&gt;&lt;/i&gt;&#039;);
			iconToChange.addClass(&#039;text-primary&#039;).removeClass(&#039;text-danger&#039;);
		}
	});

});
										</pre>
									</div>
								</div>
							</div>
						</article>

						<!-- Example 11 -->
						<article id="e11" class="tab-pane fade">
							<p>If you are changing the DOM content dynamically then you can call <code>refreshPicker</code> public method to get the new DOM items.</p>
							<button type="button" id="e11_element_helper_change" class="btn btn-primary pull-right">Change DOM</button>
							<button type="button" style="display: none" id="e11_element_helper_restore" class="btn btn-default pull-right">Restore DOM</button>
							<select name="e11_element" id="e11_element">
								<optgroup label="Web Applications">
									<option value="57436">Box add</option>
									<option value="57437">Box remove</option>
									<option value="57438">Download</option>
									<option value="57439">Upload</option>
									<option value="57524">List</option>
									<option value="57525">List 2</option>
									<option value="57526">Numbered list</option>
									<option value="57527">Menu</option>
									<option value="57528">Menu 2</option>
									<option value="57531">Cloud download</option>
									<option value="57532">Cloud upload</option>
									<option value="57533">Download 2</option>
									<option value="57534">Upload 2</option>
									<option value="57535">Download 3</option>
									<option value="57536">Upload 3</option>
									<option value="57537">Globe</option>
									<option value="57541">Attachment</option>
									<option value="57545">Bookmark</option>
									<option value="57691">Embed</option>
									<option value="57692">Code</option>
								</optgroup>
								<optgroup label="Business Icons">
									<option value="57347">Office</option>
									<option value="57348">Newspaper</option>
									<option value="57375">Book</option>
									<option value="57376">Books</option>
									<option value="57377">Library</option>
									<option value="57379">Profile</option>
									<option value="57403">Support</option>
									<option value="57406">Address book</option>
									<option value="57432">Cabinet</option>
									<option value="57433">Drawer</option>
									<option value="57434">Drawer 2</option>
									<option value="57435">Drawer 3</option>
									<option value="57450">Bubble</option>
									<option value="57453">Bubble 2</option>
									<option value="57456">User</option>
									<option value="57458">User 2</option>
									<option value="57460">User 3</option>
									<option value="57461">User 4</option>
									<option value="57463">Busy</option>
								</optgroup>
							</select>

							<div class="example-code">
								<ul class="nav nav-tabs">
									<li class="active"><a href="#e11_html" data-toggle="tab">HTML</a></li>
									<li><a href="#e11_js" data-toggle="tab">JavaScript</a></li>
								</ul>
								<div class="tab-content">
									<div class="tab-pane in fade active" id="e11_html">
										<pre class="brush: html">
&lt;button type=&quot;button&quot; id=&quot;e11_element_helper_change&quot; class=&quot;btn btn-primary pull-right&quot;&gt;Change DOM&lt;/button&gt;
&lt;button type=&quot;button&quot; style=&quot;display: none&quot; id=&quot;e11_element_helper_restore&quot; class=&quot;btn btn-default pull-right&quot;&gt;Restore DOM&lt;/button&gt;
&lt;select name=&quot;e11_element&quot; id=&quot;e11_element&quot;&gt;
	&lt;optgroup label=&quot;Web Applications&quot;&gt;
		&lt;option value=&quot;57436&quot;&gt;Box add&lt;/option&gt;
		&lt;option value=&quot;57437&quot;&gt;Box remove&lt;/option&gt;
		&lt;option value=&quot;57438&quot;&gt;Download&lt;/option&gt;
		&lt;option value=&quot;57439&quot;&gt;Upload&lt;/option&gt;
		&lt;option value=&quot;57524&quot;&gt;List&lt;/option&gt;
		&lt;option value=&quot;57525&quot;&gt;List 2&lt;/option&gt;
		&lt;option value=&quot;57526&quot;&gt;Numbered list&lt;/option&gt;
		&lt;option value=&quot;57527&quot;&gt;Menu&lt;/option&gt;
		&lt;option value=&quot;57528&quot;&gt;Menu 2&lt;/option&gt;
		&lt;option value=&quot;57531&quot;&gt;Cloud download&lt;/option&gt;
		&lt;option value=&quot;57532&quot;&gt;Cloud upload&lt;/option&gt;
		&lt;option value=&quot;57533&quot;&gt;Download 2&lt;/option&gt;
		&lt;option value=&quot;57534&quot;&gt;Upload 2&lt;/option&gt;
		&lt;option value=&quot;57535&quot;&gt;Download 3&lt;/option&gt;
		&lt;option value=&quot;57536&quot;&gt;Upload 3&lt;/option&gt;
		&lt;option value=&quot;57537&quot;&gt;Globe&lt;/option&gt;
		&lt;option value=&quot;57541&quot;&gt;Attachment&lt;/option&gt;
		&lt;option value=&quot;57545&quot;&gt;Bookmark&lt;/option&gt;
		&lt;option value=&quot;57691&quot;&gt;Embed&lt;/option&gt;
		&lt;option value=&quot;57692&quot;&gt;Code&lt;/option&gt;
	&lt;/optgroup&gt;
	&lt;optgroup label=&quot;Business Icons&quot;&gt;
		&lt;option value=&quot;57347&quot;&gt;Office&lt;/option&gt;
		&lt;option value=&quot;57348&quot;&gt;Newspaper&lt;/option&gt;
		&lt;option value=&quot;57375&quot;&gt;Book&lt;/option&gt;
		&lt;option value=&quot;57376&quot;&gt;Books&lt;/option&gt;
		&lt;option value=&quot;57377&quot;&gt;Library&lt;/option&gt;
		&lt;option value=&quot;57379&quot;&gt;Profile&lt;/option&gt;
		&lt;option value=&quot;57403&quot;&gt;Support&lt;/option&gt;
		&lt;option value=&quot;57406&quot;&gt;Address book&lt;/option&gt;
		&lt;option value=&quot;57432&quot;&gt;Cabinet&lt;/option&gt;
		&lt;option value=&quot;57433&quot;&gt;Drawer&lt;/option&gt;
		&lt;option value=&quot;57434&quot;&gt;Drawer 2&lt;/option&gt;
		&lt;option value=&quot;57435&quot;&gt;Drawer 3&lt;/option&gt;
		&lt;option value=&quot;57450&quot;&gt;Bubble&lt;/option&gt;
		&lt;option value=&quot;57453&quot;&gt;Bubble 2&lt;/option&gt;
		&lt;option value=&quot;57456&quot;&gt;User&lt;/option&gt;
		&lt;option value=&quot;57458&quot;&gt;User 2&lt;/option&gt;
		&lt;option value=&quot;57460&quot;&gt;User 3&lt;/option&gt;
		&lt;option value=&quot;57461&quot;&gt;User 4&lt;/option&gt;
		&lt;option value=&quot;57463&quot;&gt;Busy&lt;/option&gt;
	&lt;/optgroup&gt;
&lt;/select&gt;
										</pre>
									</div>
									<div class="tab-pane fade" id="e11_js">
										<pre class="brush: js">
jQuery(document).ready(function($) {

	/**
	 * Example 11
	 * Refresh iconPicker on DOM change
	 */

	// Init fontIconPicker
	var e11_element = $(&#039;#e11_element&#039;).fontIconPicker({
		useAttribute: true,
		theme: &#039;fip-darkgrey&#039;,
		attributeName: &#039;data-icomoon&#039;,
		emptyIconValue: &#039;none&#039;
	});

	// Get the original HTML for later use
	var e11_original_html = e11_element.html();

	// Add event listener to the change button
	$(&#039;#e11_element_helper_change&#039;).on(&#039;click&#039;, function() {

		// Change the item HTML
		var new_html = &#039;&lt;optgroup label=&quot;Form Control Icons&quot;&gt;&#039; +
			&#039;&lt;option value=&quot;57383&quot;&gt;Copy&lt;/option&gt;&#039; +
			&#039;&lt;option value=&quot;57384&quot;&gt;Copy 2&lt;/option&gt;&#039; +
			&#039;&lt;option value=&quot;57385&quot;&gt;Copy 3&lt;/option&gt;&#039; +
			&#039;&lt;option value=&quot;57386&quot;&gt;Paste&lt;/option&gt;&#039; +
			&#039;&lt;option value=&quot;57387&quot;&gt;Paste 2&lt;/option&gt;&#039; +
			&#039;&lt;option value=&quot;57388&quot;&gt;Paste 3&lt;/option&gt;&#039; +
			&#039;&lt;option value=&quot;57484&quot;&gt;Settings&lt;/option&gt;&#039; +
			&#039;&lt;option value=&quot;57594&quot;&gt;Cancel circle&lt;/option&gt;&#039; +
			&#039;&lt;option value=&quot;57595&quot;&gt;Checkmark circle&lt;/option&gt;&#039; +
			&#039;&lt;option value=&quot;57600&quot;&gt;Spell check&lt;/option&gt;&#039; +
			&#039;&lt;option value=&quot;57603&quot;&gt;Enter&lt;/option&gt;&#039; +
			&#039;&lt;option value=&quot;57604&quot;&gt;Exit&lt;/option&gt;&#039; +
			&#039;&lt;option value=&quot;57659&quot;&gt;Radio checked&lt;/option&gt;&#039; +
			&#039;&lt;option value=&quot;57660&quot;&gt;Radio unchecked&lt;/option&gt;&#039; +
			&#039;&lt;option value=&quot;57693&quot;&gt;Console&lt;/option&gt;&#039; +
		&#039;&lt;/optgroup&gt;&#039; +
		&#039;&lt;optgroup label=&quot;User Action &amp; Text Editor&quot;&gt;&#039; +
			&#039;&lt;option value=&quot;57442&quot;&gt;Undo&lt;/option&gt;&#039; +
			&#039;&lt;option value=&quot;57443&quot;&gt;Redo&lt;/option&gt;&#039; +
			&#039;&lt;option value=&quot;57444&quot;&gt;Flip&lt;/option&gt;&#039; +
			&#039;&lt;option value=&quot;57445&quot;&gt;Flip 2&lt;/option&gt;&#039; +
			&#039;&lt;option value=&quot;57446&quot;&gt;Undo 2&lt;/option&gt;&#039; +
			&#039;&lt;option value=&quot;57447&quot;&gt;Redo 2&lt;/option&gt;&#039; +
			&#039;&lt;option value=&quot;57472&quot;&gt;Zoomin&lt;/option&gt;&#039; +
			&#039;&lt;option value=&quot;57473&quot;&gt;Zoomout&lt;/option&gt;&#039; +
			&#039;&lt;option value=&quot;57474&quot;&gt;Expand&lt;/option&gt;&#039; +
			&#039;&lt;option value=&quot;57475&quot;&gt;Contract&lt;/option&gt;&#039; +
			&#039;&lt;option value=&quot;57476&quot;&gt;Expand 2&lt;/option&gt;&#039; +
			&#039;&lt;option value=&quot;57477&quot;&gt;Contract 2&lt;/option&gt;&#039; +
			&#039;&lt;option value=&quot;57539&quot;&gt;Link&lt;/option&gt;&#039; +
			&#039;&lt;option value=&quot;57662&quot;&gt;Scissors&lt;/option&gt;&#039; +
			&#039;&lt;option value=&quot;57668&quot;&gt;Bold&lt;/option&gt;&#039; +
			&#039;&lt;option value=&quot;57669&quot;&gt;Underline&lt;/option&gt;&#039; +
			&#039;&lt;option value=&quot;57670&quot;&gt;Italic&lt;/option&gt;&#039; +
			&#039;&lt;option value=&quot;57671&quot;&gt;Strikethrough&lt;/option&gt;&#039; +
			&#039;&lt;option value=&quot;57674&quot;&gt;Table&lt;/option&gt;&#039; +
			&#039;&lt;option value=&quot;57675&quot;&gt;Table 2&lt;/option&gt;&#039; +
			&#039;&lt;option value=&quot;57688&quot;&gt;Indent increase&lt;/option&gt;&#039; +
			&#039;&lt;option value=&quot;57689&quot;&gt;Indent decrease&lt;/option&gt;&#039; +
		&#039;&lt;/optgroup&gt;&#039;;
		e11_element.html(new_html);

		// Refresh the iconPicker
		e11_element.refreshPicker();

		// Hide this element
		$(this).hide();

		// Show the restore button
		$(&#039;#e11_element_helper_restore&#039;).fadeIn(&#039;fast&#039;);
	});

	// Add event listener to the restore button
	$(&#039;#e11_element_helper_restore&#039;).on(&#039;click&#039;, function() {

		// Restore the original HTML
		e11_element.html(e11_original_html);

		// Refresh the iconPicker
		e11_element.refreshPicker();

		// Hide this button
		$(this).hide();

		// Show the change button
		$(&#039;#e11_element_helper_change&#039;).fadeIn(&#039;fast&#039;);

	});
});
										</pre>
									</div>
								</div>
							</div>
						</article>

						<!-- Example 12 -->
						<article id="e12" class="tab-pane fade">
							<p>fontIconPicker works with most (if not all) form validators. fontIconPicker does not remove or hide the original element, rather puts it behind the icon picker. So validation engines will not have any difficulty finding the original element or putting tooltips near it. The demo below shows form validation with </p>
							<div class="live-preview text-left">
								<form action="" method="POST" role="form" class="form-horizontal" id="e12_form">
									<legend>Sample Form</legend>

									<div class="form-group">
										<label class="col-md-4" for="e12_f_name">Full Name</label>
										<div class="col-md-4">
											<input data-bv-notempty="true" data-bv-notempty-message="You must enter a first name" type="text" class="form-control" id="e12_f_name" name="e12_f_name" placeholder="First Name" />
										</div>
										<div class="col-md-4">
											<input data-bv-notempty="true" data-bv-notempty-message="You must enter a last name" type="text" class="form-control" id="e12_l_name" name="e12_l_name" placeholder="Last Name" />
										</div>
									</div>

									<div class="form-group">
										<label for="e12_picker_1" class="col-md-4">Pick a Fontello Font</label>
										<div class="col-md-8">
											<input data-bv-notempty="true" data-bv-notempty-message="You must pick a font" type="text" class="form-control" id="e12_picker_1" name="e12_picker_1" placeholder="Fontello" />
										</div>
									</div>

									<div class="form-group">
										<label for="e12_picker_2" class="col-md-4">Pick an IcoMoon Font</label>
										<div class="col-md-8">
											<input data-bv-notempty="true" data-bv-notempty-message="You must pick a font" type="text" class="form-control" id="e12_picker_2" name="e12_picker_2" placeholder="IcoMoon" />
										</div>
									</div>

									<button type="submit" class="btn btn-primary">Validate</button>
								</form>
							</div>
							<div class="example-code">
								<ul class="nav nav-tabs">
									<li class="active"><a href="#e12_html" data-toggle="tab">HTML</a></li>
									<li><a href="#e12_js" data-toggle="tab">JavaScript</a></li>
								</ul>
								<div class="tab-content">
									<div class="tab-pane in fade active" id="e12_html">
										<pre class="brush: html">
&lt;form action=&quot;&quot; method=&quot;POST&quot; role=&quot;form&quot; class=&quot;form-horizontal&quot; id=&quot;e12_form&quot;&gt;
	&lt;legend&gt;Sample Form&lt;/legend&gt;

	&lt;div class=&quot;form-group&quot;&gt;
		&lt;label class=&quot;col-md-4&quot; for=&quot;e12_f_name&quot;&gt;Full Name&lt;/label&gt;
		&lt;div class=&quot;col-md-4&quot;&gt;
			&lt;input data-bv-notempty=&quot;true&quot; data-bv-notempty-message=&quot;You must enter a first name&quot; type=&quot;text&quot; class=&quot;form-control&quot; id=&quot;e12_f_name&quot; name=&quot;e12_f_name&quot; placeholder=&quot;First Name&quot; /&gt;
		&lt;/div&gt;
		&lt;div class=&quot;col-md-4&quot;&gt;
			&lt;input data-bv-notempty=&quot;true&quot; data-bv-notempty-message=&quot;You must enter a last name&quot; type=&quot;text&quot; class=&quot;form-control&quot; id=&quot;e12_l_name&quot; name=&quot;e12_l_name&quot; placeholder=&quot;Last Name&quot; /&gt;
		&lt;/div&gt;
	&lt;/div&gt;

	&lt;div class=&quot;form-group&quot;&gt;
		&lt;label for=&quot;e12_picker_1&quot; class=&quot;col-md-4&quot;&gt;Pick a Fontello Font&lt;/label&gt;
		&lt;div class=&quot;col-md-8&quot;&gt;
			&lt;input data-bv-notempty=&quot;true&quot; data-bv-notempty-message=&quot;You must pick a font&quot; type=&quot;text&quot; class=&quot;form-control&quot; id=&quot;e12_picker_1&quot; name=&quot;e12_picker_1&quot; placeholder=&quot;Fontello&quot; /&gt;
		&lt;/div&gt;
	&lt;/div&gt;

	&lt;div class=&quot;form-group&quot;&gt;
		&lt;label for=&quot;e12_picker_2&quot; class=&quot;col-md-4&quot;&gt;Pick an IcoMoon Font&lt;/label&gt;
		&lt;div class=&quot;col-md-8&quot;&gt;
			&lt;input data-bv-notempty=&quot;true&quot; data-bv-notempty-message=&quot;You must pick a font&quot; type=&quot;text&quot; class=&quot;form-control&quot; id=&quot;e12_picker_2&quot; name=&quot;e12_picker_2&quot; placeholder=&quot;IcoMoon&quot; /&gt;
		&lt;/div&gt;
	&lt;/div&gt;

	&lt;button type=&quot;submit&quot; class=&quot;btn btn-primary&quot;&gt;Validate&lt;/button&gt;
&lt;/form&gt;
										</pre>
									</div>
									<div class="tab-pane fade" id="e12_js">
										<pre class="brush: js">
jQuery(document).ready(function($) {

	/**
	 * Example 12
	 * Form Validation with validator engines
	 *
	 * bootstrapValidator must be included
	 * @link: http://bootstrapvalidator.com/
	 */

	// Init fontIconPicker 1
	$(&#039;#e12_picker_1&#039;).fontIconPicker({
		source: fnt_icons_categorized,
		theme: &#039;fip-bootstrap&#039;
	});

	// Init fontIconPicker 2
	$(&#039;#e12_picker_2&#039;).fontIconPicker({
		source: icm_icons,
		searchSource: icm_icon_search,
		useAttribute: true,
		attributeName: &#039;data-icomoon&#039;,
		theme: &#039;fip-bootstrap&#039;
	});

	// bootstrapValidator init
	// Works out of the box, no need to change any configurations
	$(&#039;#e12_form&#039;).bootstrapValidator({
		feedbackIcons: {
			valid: &#039;glyphicon glyphicon-ok&#039;,
			invalid: &#039;glyphicon glyphicon-remove&#039;,
			validating: &#039;glyphicon glyphicon-refresh&#039;
		},
		submitHandler: function(validator, form, submitButton) {
			alert(&#039;Validated&#039;);
		}
	});
});
										</pre>
									</div>
								</div>
							</div>
						</article>
					</div>

				</div>
			</div>
			<div class="example-variables">
				<hr />
				<h3><i class="icomoon-dice"></i> Variable Definitions</h3>
				<hr />
				<p>Sevaral variables are used in the above examples, which are defined as follows.</p>
				<pre class="brush: js">
var icm_icons = {
	&#039;Web Applications&#039; : [57436, 57437, 57438, 57439, 57524, 57525, 57526, 57527, 57528, 57531, 57532, 57533, 57534, 57535, 57536, 57537, 57541, 57545, 57691, 57692],
	&#039;Business Icons&#039; : [57347, 57348, 57375, 57376, 57377, 57379, 57403, 57406, 57432, 57433, 57434, 57435, 57450, 57453, 57456, 57458, 57460, 57461, 57463],
	&#039;eCommerce&#039; : [57392, 57397, 57398, 57399, 57402],
	&#039;Currency Icons&#039; : [],
	&#039;Form Control Icons&#039; : [57383, 57384, 57385, 57386, 57387, 57388, 57484, 57594, 57595, 57600, 57603, 57604, 57659, 57660, 57693],
	&#039;User Action &amp; Text Editor&#039; : [57442, 57443, 57444, 57445, 57446, 57447, 57472, 57473, 57474, 57475, 57476, 57477, 57539, 57662, 57668, 57669, 57670, 57671, 57674, 57675, 57688, 57689],
	&#039;Charts and Codes&#039; : [57493],
	&#039;Attentive&#039; : [57543, 57588, 57590, 57591, 57592, 57593, 57596],
	&#039;Multimedia Icons&#039; : [57356, 57357, 57362, 57363, 57448, 57485, 57547, 57548, 57549, 57605, 57606, 57609, 57610, 57611, 57614, 57617, 57618, 57620, 57621, 57622, 57623, 57624, 57625, 57626],
	&#039;Location and Contact&#039; : [57344, 57345, 57346, 57404, 57405, 57408, 57410, 57411, 57413, 57414, 57540],
	&#039;Date and Time&#039; : [57415, 57416, 57417, 57421, 57422, 57423],
	&#039;Devices&#039; : [57359, 57361, 57364, 57425, 57426, 57430],
	&#039;Tools&#039; : [57349, 57350, 57352, 57355, 57365, 57478, 57479, 57480, 57481, 57482, 57483, 57486, 57487, 57488, 57663, 57664],
	&#039;Social and Networking&#039; : [57694, 57700, 57701, 57702, 57703, 57704, 57705, 57706, 57707, 57709, 57710, 57711, 57717, 57718, 57719, 57736, 57737, 57738, 57739, 57740, 57741, 57742, 57746, 57747, 57748, 57755, 57756, 57758, 57759, 57760, 57761, 57763, 57764, 57765, 57766, 57767, 57776],
	&#039;Brands&#039; : [57743, 57750, 57751, 57752, 57753, 57754, 57757, 57773, 57774, 57775, 57789, 57790, 57792, 57793],
	&#039;Files &amp; Documents&#039; : [57378, 57380, 57381, 57382, 57390, 57391, 57778, 57779, 57780, 57781, 57782, 57783, 57784, 57785, 57786, 57787],
	&#039;Like &amp; Dislike Icons&#039; : [57542, 57544, 57550, 57551, 57552, 57553, 57554, 57555, 57556, 57557],
	&#039;Emoticons&#039; : [57558, 57559, 57560, 57561, 57562, 57563, 57564, 57565, 57566, 57567, 57568, 57569, 57570, 57571, 57572, 57573, 57574, 57575, 57576, 57577, 57578, 57579, 57580, 57581, 57582, 57583],
	&#039;Directional Icons&#039; : [57584, 57585, 57586, 57587, 57631, 57632, 57633, 57634, 57635, 57636, 57637, 57638, 57639, 57640, 57641, 57642, 57643, 57644, 57645, 57646, 57647, 57648, 57649, 57650, 57651, 57652, 57653, 57654],
	&#039;Other Icons&#039; : [57351, 57353, 57354, 57358, 57360, 57366, 57367, 57368, 57369, 57370, 57371, 57372, 57373, 57374, 57389, 57393, 57394, 57395, 57396, 57400, 57401, 57407, 57409, 57412, 57418, 57419, 57420, 57424, 57427, 57428, 57429, 57431, 57440, 57441, 57449, 57451, 57452, 57454, 57455, 57457, 57459, 57462, 57464, 57465, 57466, 57467, 57468, 57469, 57470, 57471, 57489, 57490, 57491, 57492, 57494, 57495, 57496, 57497, 57498, 57499, 57500, 57501, 57502, 57503, 57504, 57505, 57506, 57507, 57508, 57509, 57510, 57511, 57512, 57513, 57514, 57515, 57516, 57517, 57518, 57519, 57520, 57521, 57522, 57523, 57529, 57530, 57538, 57546, 57589, 57597, 57598, 57599, 57601, 57602, 57607, 57608, 57612, 57613, 57615, 57616, 57619, 57627, 57628, 57629, 57630, 57655, 57656, 57657, 57658, 57661, 57665, 57666, 57667, 57672, 57673, 57676, 57677, 57678, 57679, 57680, 57681, 57682, 57683, 57684, 57685, 57686, 57687, 57690, 57695, 57696, 57697, 57698, 57699, 57708, 57712, 57713, 57714, 57715, 57716, 57720, 57721, 57722, 57723, 57724, 57725, 57726, 57727, 57728, 57729, 57730, 57731, 57732, 57733, 57734, 57735, 57744, 57745, 57749, 57762, 57768, 57769, 57770, 57771, 57772, 57777, 57788, 57791, 57794]
};

var icm_icon_search = {
	&#039;Web Applications&#039; : [&#039;Box add&#039;, &#039;Box remove&#039;, &#039;Download&#039;, &#039;Upload&#039;, &#039;List&#039;, &#039;List 2&#039;, &#039;Numbered list&#039;, &#039;Menu&#039;, &#039;Menu 2&#039;, &#039;Cloud download&#039;, &#039;Cloud upload&#039;, &#039;Download 2&#039;, &#039;Upload 2&#039;, &#039;Download 3&#039;, &#039;Upload 3&#039;, &#039;Globe&#039;, &#039;Attachment&#039;, &#039;Bookmark&#039;, &#039;Embed&#039;, &#039;Code&#039;],
	&#039;Business Icons&#039; : [&#039;Office&#039;, &#039;Newspaper&#039;, &#039;Book&#039;, &#039;Books&#039;, &#039;Library&#039;, &#039;Profile&#039;, &#039;Support&#039;, &#039;Address book&#039;, &#039;Cabinet&#039;, &#039;Drawer&#039;, &#039;Drawer 2&#039;, &#039;Drawer 3&#039;, &#039;Bubble&#039;, &#039;Bubble 2&#039;, &#039;User&#039;, &#039;User 2&#039;, &#039;User 3&#039;, &#039;User 4&#039;, &#039;Busy&#039;],
	&#039;eCommerce&#039; : [&#039;Tag&#039;, &#039;Cart&#039;, &#039;Cart 2&#039;, &#039;Cart 3&#039;, &#039;Calculate&#039;],
	&#039;Currency Icons&#039; : [],
	&#039;Form Control Icons&#039; : [&#039;Copy&#039;, &#039;Copy 2&#039;, &#039;Copy 3&#039;, &#039;Paste&#039;, &#039;Paste 2&#039;, &#039;Paste 3&#039;, &#039;Settings&#039;, &#039;Cancel circle&#039;, &#039;Checkmark circle&#039;, &#039;Spell check&#039;, &#039;Enter&#039;, &#039;Exit&#039;, &#039;Radio checked&#039;, &#039;Radio unchecked&#039;, &#039;Console&#039;],
	&#039;User Action &amp; Text Editor&#039; : [&#039;Undo&#039;, &#039;Redo&#039;, &#039;Flip&#039;, &#039;Flip 2&#039;, &#039;Undo 2&#039;, &#039;Redo 2&#039;, &#039;Zoomin&#039;, &#039;Zoomout&#039;, &#039;Expand&#039;, &#039;Contract&#039;, &#039;Expand 2&#039;, &#039;Contract 2&#039;, &#039;Link&#039;, &#039;Scissors&#039;, &#039;Bold&#039;, &#039;Underline&#039;, &#039;Italic&#039;, &#039;Strikethrough&#039;, &#039;Table&#039;, &#039;Table 2&#039;, &#039;Indent increase&#039;, &#039;Indent decrease&#039;],
	&#039;Charts and Codes&#039; : [&#039;Pie&#039;],
	&#039;Attentive&#039; : [&#039;Eye blocked&#039;, &#039;Warning&#039;, &#039;Question&#039;, &#039;Info&#039;, &#039;Info 2&#039;, &#039;Blocked&#039;, &#039;Spam&#039;],
	&#039;Multimedia Icons&#039; : [&#039;Image&#039;, &#039;Image 2&#039;, &#039;Play&#039;, &#039;Film&#039;, &#039;Forward&#039;, &#039;Equalizer&#039;, &#039;Brightness medium&#039;, &#039;Brightness contrast&#039;, &#039;Contrast&#039;, &#039;Play 2&#039;, &#039;Pause&#039;, &#039;Forward 2&#039;, &#039;Play 3&#039;, &#039;Pause 2&#039;, &#039;Forward 3&#039;, &#039;Previous&#039;, &#039;Next&#039;, &#039;Volume high&#039;, &#039;Volume medium&#039;, &#039;Volume low&#039;, &#039;Volume mute&#039;, &#039;Volume mute 2&#039;, &#039;Volume increase&#039;, &#039;Volume decrease&#039;],
	&#039;Location and Contact&#039; : [&#039;Home&#039;, &#039;Home 2&#039;, &#039;Home 3&#039;, &#039;Phone&#039;, &#039;Phone hang up&#039;, &#039;Envelope&#039;, &#039;Location&#039;, &#039;Location 2&#039;, &#039;Map&#039;, &#039;Map 2&#039;, &#039;Flag&#039;],
	&#039;Date and Time&#039; : [&#039;History&#039;, &#039;Clock&#039;, &#039;Clock 2&#039;, &#039;Stopwatch&#039;, &#039;Calendar&#039;, &#039;Calendar 2&#039;],
	&#039;Devices&#039; : [&#039;Camera&#039;, &#039;Headphones&#039;, &#039;Camera 2&#039;, &#039;Keyboard&#039;, &#039;Screen&#039;, &#039;Tablet&#039;],
	&#039;Tools&#039; : [&#039;Pencil&#039;, &#039;Pencil 2&#039;, &#039;Pen&#039;, &#039;Paint format&#039;, &#039;Dice&#039;, &#039;Key&#039;, &#039;Key 2&#039;, &#039;Lock&#039;, &#039;Lock 2&#039;, &#039;Unlocked&#039;, &#039;Wrench&#039;, &#039;Cog&#039;, &#039;Cogs&#039;, &#039;Cog 2&#039;, &#039;Filter&#039;, &#039;Filter 2&#039;],
	&#039;Social and Networking&#039; : [&#039;Share&#039;, &#039;Googleplus&#039;, &#039;Googleplus 2&#039;, &#039;Googleplus 3&#039;, &#039;Googleplus 4&#039;, &#039;Google drive&#039;, &#039;Facebook&#039;, &#039;Facebook 2&#039;, &#039;Facebook 3&#039;, &#039;Twitter&#039;, &#039;Twitter 2&#039;, &#039;Twitter 3&#039;, &#039;Vimeo&#039;, &#039;Vimeo 2&#039;, &#039;Vimeo 3&#039;, &#039;Github&#039;, &#039;Github 2&#039;, &#039;Github 3&#039;, &#039;Github 4&#039;, &#039;Github 5&#039;, &#039;Wordpress&#039;, &#039;Wordpress 2&#039;, &#039;Tumblr&#039;, &#039;Tumblr 2&#039;, &#039;Yahoo&#039;, &#039;Soundcloud&#039;, &#039;Soundcloud 2&#039;, &#039;Reddit&#039;, &#039;Linkedin&#039;, &#039;Lastfm&#039;, &#039;Lastfm 2&#039;, &#039;Stumbleupon&#039;, &#039;Stumbleupon 2&#039;, &#039;Stackoverflow&#039;, &#039;Pinterest&#039;, &#039;Pinterest 2&#039;, &#039;Yelp&#039;],
	&#039;Brands&#039; : [&#039;Joomla&#039;, &#039;Apple&#039;, &#039;Finder&#039;, &#039;Android&#039;, &#039;Windows&#039;, &#039;Windows 8&#039;, &#039;Skype&#039;, &#039;Paypal&#039;, &#039;Paypal 2&#039;, &#039;Paypal 3&#039;, &#039;Chrome&#039;, &#039;Firefox&#039;, &#039;Opera&#039;, &#039;Safari&#039;],
	&#039;Files &amp; Documents&#039; : [&#039;File&#039;, &#039;File 2&#039;, &#039;File 3&#039;, &#039;File 4&#039;, &#039;Folder&#039;, &#039;Folder open&#039;, &#039;File pdf&#039;, &#039;File openoffice&#039;, &#039;File word&#039;, &#039;File excel&#039;, &#039;File zip&#039;, &#039;File powerpoint&#039;, &#039;File xml&#039;, &#039;File css&#039;, &#039;Html 5&#039;, &#039;Html 52&#039;],
	&#039;Like &amp; Dislike Icons&#039; : [&#039;Eye&#039;, &#039;Eye 2&#039;, &#039;Star&#039;, &#039;Star 2&#039;, &#039;Star 3&#039;, &#039;Heart&#039;, &#039;Heart 2&#039;, &#039;Heart broken&#039;, &#039;Thumbs up&#039;, &#039;Thumbs up 2&#039;],
	&#039;Emoticons&#039; : [&#039;Happy&#039;, &#039;Happy 2&#039;, &#039;Smiley&#039;, &#039;Smiley 2&#039;, &#039;Tongue&#039;, &#039;Tongue 2&#039;, &#039;Sad&#039;, &#039;Sad 2&#039;, &#039;Wink&#039;, &#039;Wink 2&#039;, &#039;Grin&#039;, &#039;Grin 2&#039;, &#039;Cool&#039;, &#039;Cool 2&#039;, &#039;Angry&#039;, &#039;Angry 2&#039;, &#039;Evil&#039;, &#039;Evil 2&#039;, &#039;Shocked&#039;, &#039;Shocked 2&#039;, &#039;Confused&#039;, &#039;Confused 2&#039;, &#039;Neutral&#039;, &#039;Neutral 2&#039;, &#039;Wondering&#039;, &#039;Wondering 2&#039;],
	&#039;Directional Icons&#039; : [&#039;Point up&#039;, &#039;Point right&#039;, &#039;Point down&#039;, &#039;Point left&#039;, &#039;Arrow up left&#039;, &#039;Arrow up&#039;, &#039;Arrow up right&#039;, &#039;Arrow right&#039;, &#039;Arrow down right&#039;, &#039;Arrow down&#039;, &#039;Arrow down left&#039;, &#039;Arrow left&#039;, &#039;Arrow up left 2&#039;, &#039;Arrow up 2&#039;, &#039;Arrow up right 2&#039;, &#039;Arrow right 2&#039;, &#039;Arrow down right 2&#039;, &#039;Arrow down 2&#039;, &#039;Arrow down left 2&#039;, &#039;Arrow left 2&#039;, &#039;Arrow up left 3&#039;, &#039;Arrow up 3&#039;, &#039;Arrow up right 3&#039;, &#039;Arrow right 3&#039;, &#039;Arrow down right 3&#039;, &#039;Arrow down 3&#039;, &#039;Arrow down left 3&#039;, &#039;Arrow left 3&#039;],
	&#039;Other Icons&#039; : [&#039;Quill&#039;, &#039;Blog&#039;, &#039;Droplet&#039;, &#039;Images&#039;, &#039;Music&#039;, &#039;Pacman&#039;, &#039;Spades&#039;, &#039;Clubs&#039;, &#039;Diamonds&#039;, &#039;Pawn&#039;, &#039;Bullhorn&#039;, &#039;Connection&#039;, &#039;Podcast&#039;, &#039;Feed&#039;, &#039;Stack&#039;, &#039;Tags&#039;, &#039;Barcode&#039;, &#039;Qrcode&#039;, &#039;Ticket&#039;, &#039;Coin&#039;, &#039;Credit&#039;, &#039;Notebook&#039;, &#039;Pushpin&#039;, &#039;Compass&#039;, &#039;Alarm&#039;, &#039;Alarm 2&#039;, &#039;Bell&#039;, &#039;Print&#039;, &#039;Laptop&#039;, &#039;Mobile&#039;, &#039;Mobile 2&#039;, &#039;Tv&#039;, &#039;Disk&#039;, &#039;Storage&#039;, &#039;Reply&#039;, &#039;Bubbles&#039;, &#039;Bubbles 2&#039;, &#039;Bubbles 3&#039;, &#039;Bubbles 4&#039;, &#039;Users&#039;, &#039;Users 2&#039;, &#039;Quotes left&#039;, &#039;Spinner&#039;, &#039;Spinner 2&#039;, &#039;Spinner 3&#039;, &#039;Spinner 4&#039;, &#039;Spinner 5&#039;, &#039;Spinner 6&#039;, &#039;Binoculars&#039;, &#039;Search&#039;, &#039;Hammer&#039;, &#039;Wand&#039;, &#039;Aid&#039;, &#039;Bug&#039;, &#039;Stats&#039;, &#039;Bars&#039;, &#039;Bars 2&#039;, &#039;Gift&#039;, &#039;Trophy&#039;, &#039;Glass&#039;, &#039;Mug&#039;, &#039;Food&#039;, &#039;Leaf&#039;, &#039;Rocket&#039;, &#039;Meter&#039;, &#039;Meter 2&#039;, &#039;Dashboard&#039;, &#039;Hammer 2&#039;, &#039;Fire&#039;, &#039;Lab&#039;, &#039;Magnet&#039;, &#039;Remove&#039;, &#039;Remove 2&#039;, &#039;Briefcase&#039;, &#039;Airplane&#039;, &#039;Truck&#039;, &#039;Road&#039;, &#039;Accessibility&#039;, &#039;Target&#039;, &#039;Shield&#039;, &#039;Lightning&#039;, &#039;Switch&#039;, &#039;Powercord&#039;, &#039;Signup&#039;, &#039;Tree&#039;, &#039;Cloud&#039;, &#039;Earth&#039;, &#039;Bookmarks&#039;, &#039;Notification&#039;, &#039;Close&#039;, &#039;Checkmark&#039;, &#039;Checkmark 2&#039;, &#039;Minus&#039;, &#039;Plus&#039;, &#039;Stop&#039;, &#039;Backward&#039;, &#039;Stop 2&#039;, &#039;Backward 2&#039;, &#039;First&#039;, &#039;Last&#039;, &#039;Eject&#039;, &#039;Loop&#039;, &#039;Loop 2&#039;, &#039;Loop 3&#039;, &#039;Shuffle&#039;, &#039;Tab&#039;, &#039;Checkbox checked&#039;, &#039;Checkbox unchecked&#039;, &#039;Checkbox partial&#039;, &#039;Crop&#039;, &#039;Font&#039;, &#039;Text height&#039;, &#039;Text width&#039;, &#039;Omega&#039;, &#039;Sigma&#039;, &#039;Insert template&#039;, &#039;Pilcrow&#039;, &#039;Lefttoright&#039;, &#039;Righttoleft&#039;, &#039;Paragraph left&#039;, &#039;Paragraph center&#039;, &#039;Paragraph right&#039;, &#039;Paragraph justify&#039;, &#039;Paragraph left 2&#039;, &#039;Paragraph center 2&#039;, &#039;Paragraph right 2&#039;, &#039;Paragraph justify 2&#039;, &#039;Newtab&#039;, &#039;Mail&#039;, &#039;Mail 2&#039;, &#039;Mail 3&#039;, &#039;Mail 4&#039;, &#039;Google&#039;, &#039;Instagram&#039;, &#039;Feed 2&#039;, &#039;Feed 3&#039;, &#039;Feed 4&#039;, &#039;Youtube&#039;, &#039;Youtube 2&#039;, &#039;Lanyrd&#039;, &#039;Flickr&#039;, &#039;Flickr 2&#039;, &#039;Flickr 3&#039;, &#039;Flickr 4&#039;, &#039;Picassa&#039;, &#039;Picassa 2&#039;, &#039;Dribbble&#039;, &#039;Dribbble 2&#039;, &#039;Dribbble 3&#039;, &#039;Forrst&#039;, &#039;Forrst 2&#039;, &#039;Deviantart&#039;, &#039;Deviantart 2&#039;, &#039;Steam&#039;, &#039;Steam 2&#039;, &#039;Blogger&#039;, &#039;Blogger 2&#039;, &#039;Tux&#039;, &#039;Delicious&#039;, &#039;Xing&#039;, &#039;Xing 2&#039;, &#039;Flattr&#039;, &#039;Foursquare&#039;, &#039;Foursquare 2&#039;, &#039;Libreoffice&#039;, &#039;Css 3&#039;, &#039;IE&#039;, &#039;IcoMoon&#039;]
};

var icm_icons_1 = {
	&#039;Web Applications&#039; : [57436, 57437, 57438, 57439, 57524, 57525, 57526, 57527, 57528, 57531, 57532, 57533, 57534, 57535, 57536, 57537, 57541, 57545, 57691, 57692],
	&#039;Business Icons&#039; : [57347, 57348, 57375, 57376, 57377, 57379, 57403, 57406, 57432, 57433, 57434, 57435, 57450, 57453, 57456, 57458, 57460, 57461, 57463],
	&#039;eCommerce&#039; : [57392, 57397, 57398, 57399, 57402]
};
var icm_icon_search_1 = {
	&#039;Web Applications&#039; : [&#039;Box add&#039;, &#039;Box remove&#039;, &#039;Download&#039;, &#039;Upload&#039;, &#039;List&#039;, &#039;List 2&#039;, &#039;Numbered list&#039;, &#039;Menu&#039;, &#039;Menu 2&#039;, &#039;Cloud download&#039;, &#039;Cloud upload&#039;, &#039;Download 2&#039;, &#039;Upload 2&#039;, &#039;Download 3&#039;, &#039;Upload 3&#039;, &#039;Globe&#039;, &#039;Attachment&#039;, &#039;Bookmark&#039;, &#039;Embed&#039;, &#039;Code&#039;],
	&#039;Business Icons&#039; : [&#039;Office&#039;, &#039;Newspaper&#039;, &#039;Book&#039;, &#039;Books&#039;, &#039;Library&#039;, &#039;Profile&#039;, &#039;Support&#039;, &#039;Address book&#039;, &#039;Cabinet&#039;, &#039;Drawer&#039;, &#039;Drawer 2&#039;, &#039;Drawer 3&#039;, &#039;Bubble&#039;, &#039;Bubble 2&#039;, &#039;User&#039;, &#039;User 2&#039;, &#039;User 3&#039;, &#039;User 4&#039;, &#039;Busy&#039;],
	&#039;eCommerce&#039; : [&#039;Tag&#039;, &#039;Cart&#039;, &#039;Cart 2&#039;, &#039;Cart 3&#039;, &#039;Calculate&#039;]
};

var icm_icons_2 = {
	&#039;Multimedia Icons&#039; : [57356, 57357, 57362, 57363, 57448, 57485, 57547, 57548, 57549, 57605, 57606, 57609, 57610, 57611, 57614, 57617, 57618, 57620, 57621, 57622, 57623, 57624, 57625, 57626],
	&#039;Location and Contact&#039; : [57344, 57345, 57346, 57404, 57405, 57408, 57410, 57411, 57413, 57414, 57540],
	&#039;Date and Time&#039; : [57415, 57416, 57417, 57421, 57422, 57423],
	&#039;Devices&#039; : [57359, 57361, 57364, 57425, 57426, 57430]
};
var icm_icon_search_2 = {
	&#039;Multimedia Icons&#039; : [&#039;Image&#039;, &#039;Image 2&#039;, &#039;Play&#039;, &#039;Film&#039;, &#039;Forward&#039;, &#039;Equalizer&#039;, &#039;Brightness medium&#039;, &#039;Brightness contrast&#039;, &#039;Contrast&#039;, &#039;Play 2&#039;, &#039;Pause&#039;, &#039;Forward 2&#039;, &#039;Play 3&#039;, &#039;Pause 2&#039;, &#039;Forward 3&#039;, &#039;Previous&#039;, &#039;Next&#039;, &#039;Volume high&#039;, &#039;Volume medium&#039;, &#039;Volume low&#039;, &#039;Volume mute&#039;, &#039;Volume mute 2&#039;, &#039;Volume increase&#039;, &#039;Volume decrease&#039;],
	&#039;Location and Contact&#039; : [&#039;Home&#039;, &#039;Home 2&#039;, &#039;Home 3&#039;, &#039;Phone&#039;, &#039;Phone hang up&#039;, &#039;Envelope&#039;, &#039;Location&#039;, &#039;Location 2&#039;, &#039;Map&#039;, &#039;Map 2&#039;, &#039;Flag&#039;],
	&#039;Date and Time&#039; : [&#039;History&#039;, &#039;Clock&#039;, &#039;Clock 2&#039;, &#039;Stopwatch&#039;, &#039;Calendar&#039;, &#039;Calendar 2&#039;],
	&#039;Devices&#039; : [&#039;Camera&#039;, &#039;Headphones&#039;, &#039;Camera 2&#039;, &#039;Keyboard&#039;, &#039;Screen&#039;, &#039;Tablet&#039;],
};

var icm_icons_3 = [57542, 57544, 57550, 57551, 57552, 57553, 57554, 57555, 57556, 57557];
var icm_icon_search_3 = [&#039;Eye&#039;, &#039;Eye 2&#039;, &#039;Star&#039;, &#039;Star 2&#039;, &#039;Star 3&#039;, &#039;Heart&#039;, &#039;Heart 2&#039;, &#039;Heart broken&#039;, &#039;Thumbs up&#039;, &#039;Thumbs up 2&#039;];

var fnt_icons = [&quot;icon-music&quot;, &quot;icon-search&quot;, &quot;icon-mail&quot;, &quot;icon-mail-alt&quot;, &quot;icon-heart&quot;, &quot;icon-heart-empty&quot;, &quot;icon-star&quot;, &quot;icon-star-empty&quot;, &quot;icon-star-half&quot;, &quot;icon-star-half-alt&quot;, &quot;icon-user&quot;, &quot;icon-users&quot;, &quot;icon-male&quot;, &quot;icon-female&quot;, &quot;icon-video&quot;, &quot;icon-videocam&quot;, &quot;icon-picture&quot;, &quot;icon-camera&quot;, &quot;icon-camera-alt&quot;, &quot;icon-th-large&quot;, &quot;icon-th&quot;, &quot;icon-th-list&quot;, &quot;icon-ok&quot;, &quot;icon-ok-circled&quot;, &quot;icon-ok-circled2&quot;, &quot;icon-ok-squared&quot;, &quot;icon-cancel&quot;, &quot;icon-cancel-circled&quot;, &quot;icon-cancel-circled2&quot;, &quot;icon-plus&quot;, &quot;icon-plus-circled&quot;, &quot;icon-plus-squared&quot;, &quot;icon-plus-squared-small&quot;, &quot;icon-minus&quot;, &quot;icon-minus-circled&quot;, &quot;icon-minus-squared&quot;, &quot;icon-minus-squared-alt&quot;, &quot;icon-minus-squared-small&quot;, &quot;icon-help&quot;, &quot;icon-help-circled&quot;, &quot;icon-info-circled&quot;, &quot;icon-info&quot;, &quot;icon-home&quot;, &quot;icon-link&quot;, &quot;icon-unlink&quot;, &quot;icon-link-ext&quot;, &quot;icon-link-ext-alt&quot;, &quot;icon-attach&quot;, &quot;icon-lock&quot;, &quot;icon-lock-open&quot;, &quot;icon-lock-open-alt&quot;, &quot;icon-pin&quot;, &quot;icon-eye&quot;, &quot;icon-eye-off&quot;, &quot;icon-tag&quot;, &quot;icon-tags&quot;, &quot;icon-bookmark&quot;, &quot;icon-bookmark-empty&quot;, &quot;icon-flag&quot;, &quot;icon-flag-empty&quot;, &quot;icon-flag-checkered&quot;, &quot;icon-thumbs-up&quot;, &quot;icon-thumbs-down&quot;, &quot;icon-thumbs-up-alt&quot;, &quot;icon-thumbs-down-alt&quot;, &quot;icon-download&quot;, &quot;icon-upload&quot;, &quot;icon-download-cloud&quot;, &quot;icon-upload-cloud&quot;, &quot;icon-reply&quot;, &quot;icon-reply-all&quot;, &quot;icon-forward&quot;, &quot;icon-quote-left&quot;, &quot;icon-quote-right&quot;, &quot;icon-code&quot;, &quot;icon-export&quot;, &quot;icon-export-alt&quot;, &quot;icon-pencil&quot;, &quot;icon-pencil-squared&quot;, &quot;icon-edit&quot;, &quot;icon-print&quot;, &quot;icon-retweet&quot;, &quot;icon-keyboard&quot;, &quot;icon-gamepad&quot;, &quot;icon-comment&quot;, &quot;icon-chat&quot;, &quot;icon-comment-empty&quot;, &quot;icon-chat-empty&quot;, &quot;icon-bell&quot;, &quot;icon-bell-alt&quot;];

var fnt_icons_categorized = {
	&#039;Web Application Icons&#039; : [&quot;icon-mail&quot;, &quot;icon-mail-alt&quot;, &quot;icon-th-large&quot;, &quot;icon-th&quot;, &quot;icon-th-list&quot;, &quot;icon-help-circled&quot;, &quot;icon-info-circled&quot;, &quot;icon-info&quot;, &quot;icon-home&quot;, &quot;icon-link&quot;, &quot;icon-unlink&quot;, &quot;icon-link-ext&quot;, &quot;icon-link-ext-alt&quot;, &quot;icon-attach&quot;, &quot;icon-tag&quot;, &quot;icon-tags&quot;, &quot;icon-bookmark&quot;, &quot;icon-bookmark-empty&quot;, &quot;icon-download&quot;, &quot;icon-upload&quot;, &quot;icon-download-cloud&quot;, &quot;icon-upload-cloud&quot;, &quot;icon-reply&quot;, &quot;icon-reply-all&quot;],
	&#039;Form Control Icons&#039; : [&quot;icon-search&quot;, &quot;icon-ok&quot;, &quot;icon-ok-circled&quot;, &quot;icon-ok-circled2&quot;, &quot;icon-ok-squared&quot;, &quot;icon-cancel&quot;, &quot;icon-cancel-circled&quot;, &quot;icon-cancel-circled2&quot;, &quot;icon-plus&quot;, &quot;icon-plus-circled&quot;, &quot;icon-plus-squared&quot;, &quot;icon-plus-squared-small&quot;, &quot;icon-minus&quot;, &quot;icon-minus-circled&quot;, &quot;icon-minus-squared&quot;, &quot;icon-minus-squared-alt&quot;, &quot;icon-minus-squared-small&quot;, &quot;icon-quote-right&quot;, &quot;icon-code&quot;, &quot;icon-comment-empty&quot;, &quot;icon-chat-empty&quot;],
	&#039;Media Icons&#039; : [&quot;icon-video&quot;, &quot;icon-videocam&quot;, &quot;icon-picture&quot;, &quot;icon-camera&quot;, &quot;icon-camera-alt&quot;, &quot;icon-export&quot;, &quot;icon-export-alt&quot;, &quot;icon-pencil&quot;, &quot;icon-pencil-squared&quot;, &quot;icon-edit&quot;, &quot;icon-print&quot;],
	&#039;Popular Icons&#039; : [&quot;icon-heart&quot;, &quot;icon-heart-empty&quot;, &quot;icon-star&quot;, &quot;icon-star-empty&quot;, &quot;icon-star-half&quot;, &quot;icon-star-half-alt&quot;, &quot;icon-user&quot;, &quot;icon-users&quot;, &quot;icon-male&quot;, &quot;icon-female&quot;, &quot;icon-forward&quot;, &quot;icon-quote-left&quot;, &quot;icon-retweet&quot;, &quot;icon-keyboard&quot;, &quot;icon-gamepad&quot;, &quot;icon-comment&quot;, &quot;icon-chat&quot;],
	&#039;Others&#039; : [&quot;icon-music&quot;, &quot;icon-help&quot;, &quot;icon-lock&quot;, &quot;icon-lock-open&quot;, &quot;icon-lock-open-alt&quot;, &quot;icon-pin&quot;, &quot;icon-eye&quot;, &quot;icon-eye-off&quot;, &quot;icon-flag&quot;, &quot;icon-flag-empty&quot;, &quot;icon-flag-checkered&quot;, &quot;icon-thumbs-up&quot;, &quot;icon-thumbs-down&quot;, &quot;icon-thumbs-up-alt&quot;, &quot;icon-thumbs-down-alt&quot;, &quot;icon-bell&quot;, &quot;icon-bell-alt&quot;]
};

var fnt_icons_1 = [&quot;icon-mail&quot;, &quot;icon-mail-alt&quot;, &quot;icon-th-large&quot;, &quot;icon-th&quot;, &quot;icon-th-list&quot;, &quot;icon-help-circled&quot;, &quot;icon-info-circled&quot;, &quot;icon-info&quot;, &quot;icon-home&quot;, &quot;icon-link&quot;, &quot;icon-unlink&quot;, &quot;icon-link-ext&quot;, &quot;icon-link-ext-alt&quot;, &quot;icon-attach&quot;, &quot;icon-tag&quot;, &quot;icon-tags&quot;, &quot;icon-bookmark&quot;, &quot;icon-bookmark-empty&quot;, &quot;icon-download&quot;, &quot;icon-upload&quot;, &quot;icon-download-cloud&quot;, &quot;icon-upload-cloud&quot;, &quot;icon-reply&quot;, &quot;icon-reply-all&quot;];
var fnt_icons_2 = [&quot;icon-video&quot;, &quot;icon-videocam&quot;, &quot;icon-picture&quot;, &quot;icon-camera&quot;, &quot;icon-camera-alt&quot;, &quot;icon-export&quot;, &quot;icon-export-alt&quot;, &quot;icon-pencil&quot;, &quot;icon-pencil-squared&quot;, &quot;icon-edit&quot;, &quot;icon-print&quot;];
				</pre>
			</div>
		</section> <!-- /#examples -->

		<!-- #options -->
		<section id="options">
			<hr />
			<h2><a href="#main" class="icon-up-open"></a> <i class="icomoon-settings"></i> Plugin Configuration Options</h2>
			<hr />
			<p>You can pass the following options to the <code>fontIconPicker</code> constructor.</p>
			<div class="table-responsive">
				<table class="table table-striped table-bordered table-hover">
					<thead>
						<tr>
							<th>Option</th>
							<th>Datatype</th>
							<th>Description</th>
							<th>Default</th>
							<th>Example</th>
						</tr>
					</thead>
					<tbody>
						<tr>
							<th>theme</th>
							<td><code>String</code></td>
							<td>
								The theme to be used with the <code>fontIconPicker</code>. Available values are:
								<ul>
									<li>
										<code>fip-grey</code>: The default theme. Renders beautiful grey colored icon picker.
									</li>
									<li>
										<code>fip-darkgrey</code>: A deeper shade of the grey theme with CSS3 gradients, rounded corners and shadows.
									</li>
									<li>
										<code>fip-bootstrap</code>: A nice icon picker theme compatible with <a href="http://getbootstrap.com/" target="_blank">Bootstrap</a>.
									</li>
									<li>
										<code>fip-inverted</code>: Inverted color scheme.
									</li>
								</ul>
							</td>
							<td>
								<code>&#039;fip-grey&#039;</code>
							</td>
							<td>
								<pre class="brush: js">
$(&#039;#icomoon&#039;).fontIconPicker({
	theme: &#039;fip-darkgrey&#039;
});
								</pre>
							</td>
						</tr>
						<tr>
							<th>source</th>
							<td><code>Array | Object | Boolean</code></td>
							<td>
								The source of icons. Can be of two types:
								<ul>
									<li>
										<code>Array:</code> For simple list of icons without any categorizing.
									</li>
									<li>
										<code>Object:</code> For categorized list of icons. Each of the object variables should be an <code>array</code> consisting of icons under that category. Object variable name is used to populate that category.
									</li>
								</ul>
							</td>
							<td><code>false</code></td>
							<td>
								<h4>Simple list of icons, chained with other options</h4>
								<pre class="brush: js">
// init fontIconPicker
$(&#039;.myselect&#039;).fontIconPicker({
	source: [&#039;icon-heart&#039;, &#039;icon-lemon&#039;, &#039;icon-user&#039;, &#039;icon-tag&#039;, &#039;icon-help&#039;],
	emptyIcon: false,
	hasSearch: false
});
								</pre>
								<h4>Categorized list of icons</h4>
								<pre class="brush: js">
var icm_icons = {
	&#039;Web Applications&#039; : [57436, 57437, 57438, 57439, 57524, 57525, 57526, 57527, 57528, 57531, 57532, 57533, 57534, 57535, 57536, 57537, 57541, 57545, 57691, 57692],
	&#039;Business Icons&#039; : [57347, 57348, 57375, 57376, 57377, 57379, 57403, 57406, 57432, 57433, 57434, 57435, 57450, 57453, 57456, 57458, 57460, 57461, 57463],
	&#039;eCommerce&#039; : [57392, 57397, 57398, 57399, 57402],
	&#039;Currency Icons&#039; : [],
	&#039;Form Control Icons&#039; : [57383, 57384, 57385, 57386, 57387, 57388, 57484, 57594, 57595, 57600, 57603, 57604, 57659, 57660, 57693],
	&#039;User Action &amp; Text Editor&#039; : [57442, 57443, 57444, 57445, 57446, 57447, 57472, 57473, 57474, 57475, 57476, 57477, 57539, 57662, 57668, 57669, 57670, 57671, 57674, 57675, 57688, 57689],
	&#039;Charts and Codes&#039; : [57493],
	&#039;Attentive&#039; : [57543, 57588, 57590, 57591, 57592, 57593, 57596]
};
$(&#039;.myselect&#039;).fontIconPicker({
	source: icm_icons,
	useAttribute: true,
	attributeName: &#039;data-icomoon&#039;
});
								</pre>
							</td>
						</tr>
						<tr>
							<th>emptyIcon</th>
							<td><code>Boolean</code></td>
							<td>Whether or not empty icon should be shown on the icon picker. If you give your users the option to pick no icon, then leave it enabled.</td>
							<td><code>true</code></td>
							<td>
								<pre class="brush: js">
$(&#039;.myselect&#039;).fontIconPicker({
	emptyIcon: false
});
								</pre>
							</td>
						</tr>
						<tr>
							<th>emptyIconValue</th>
							<td><code>String</code></td>
							<td>What should be the value of the <code>INPUT</code> or <code>SELECT</code> field when no icon is selected. This is only used when <code>emptyIcon</code> is set to true.</td>
							<td><code>&#039;&#039;</code><br /><small class="text-muted">(empty string)</small></td>
							<td>
								<pre class="brush: js">
// Use the value &quot;none&quot; when no icon is selected
$(&#039;.myselect&#039;).fontIconPicker({
	emptyIconValue: &#039;none&#039;
});
								</pre>
							</td>
						</tr>
						<tr>
							<th>iconsPerPage</th>
							<td><code>Number</code></td>
							<td>Number of icons per page on the icon picker. Please note that if you have <code>emptyIcon</code> set to <code>true</code> then the actual number will be one less. For better appearance always provide a number in multiple of 5.</td>
							<td><code>20</code></td>
							<td>
								<pre class="brush: js">
// Show 50 icons per page
$(&#039;.myselect&#039;).fontIconPicker({
	iconsPerPage: 50
});
								</pre>
							</td>
						</tr>
						<tr>
							<th>hasSearch</th>
							<td><code>Boolean</code></td>
							<td>Whether or not to show the search bar. The search result is always non case sensitive. When the <code>fontIconPicker</code> is initiated on a <code>SELECT</code> element, the option labels (or HTML) are used for search, not the option values.</td>
							<td><code>true</code></td>
							<td>
								<pre class="brush: js">
// Do not show the search bar
$(&#039;.myselect&#039;).fontIconPicker({
	hasSearch: false
});
								</pre>
							</td>
						</tr>
						<tr>
							<th>searchSource</th>
							<td><code>Array | Object | Boolean</code></td>
							<td>Provide additional search strings for icons. Should be of the same format and <strong>order</strong> as the <code>source</code> option. This is particularly useful when passing numeric values to be used as Unicode HTML attribute to the <code>source</code>. You can then provide this additional option to pass a custom search string.<br />
							If provided, this will also be used to populate the titles of the icons.</td>
							<td><code>false</code></td>
							<td>
								<pre class="brush: js">
// Categorized Icon Source
var icm_icons = {
	&#039;Web Applications&#039; : [57436, 57437, 57438, 57439, 57524, 57525, 57526, 57527, 57528, 57531, 57532, 57533, 57534, 57535, 57536, 57537, 57541, 57545, 57691, 57692],
	&#039;Business Icons&#039; : [57347, 57348, 57375, 57376, 57377, 57379, 57403, 57406, 57432, 57433, 57434, 57435, 57450, 57453, 57456, 57458, 57460, 57461, 57463],
	&#039;eCommerce&#039; : [57392, 57397, 57398, 57399, 57402],
	&#039;Form Control Icons&#039; : [57383, 57384, 57385, 57386, 57387, 57388, 57484, 57594, 57595, 57600, 57603, 57604, 57659, 57660, 57693]
};

// Categorized Search source
// Under the same order as the source itself
var icm_icon_search = {
	&#039;Web Applications&#039; : [&#039;Box add&#039;, &#039;Box remove&#039;, &#039;Download&#039;, &#039;Upload&#039;, &#039;List&#039;, &#039;List 2&#039;, &#039;Numbered list&#039;, &#039;Menu&#039;, &#039;Menu 2&#039;, &#039;Cloud download&#039;, &#039;Cloud upload&#039;, &#039;Download 2&#039;, &#039;Upload 2&#039;, &#039;Download 3&#039;, &#039;Upload 3&#039;, &#039;Globe&#039;, &#039;Attachment&#039;, &#039;Bookmark&#039;, &#039;Embed&#039;, &#039;Code&#039;],
	&#039;Business Icons&#039; : [&#039;Office&#039;, &#039;Newspaper&#039;, &#039;Book&#039;, &#039;Books&#039;, &#039;Library&#039;, &#039;Profile&#039;, &#039;Support&#039;, &#039;Address book&#039;, &#039;Cabinet&#039;, &#039;Drawer&#039;, &#039;Drawer 2&#039;, &#039;Drawer 3&#039;, &#039;Bubble&#039;, &#039;Bubble 2&#039;, &#039;User&#039;, &#039;User 2&#039;, &#039;User 3&#039;, &#039;User 4&#039;, &#039;Busy&#039;],
	&#039;eCommerce&#039; : [&#039;Tag&#039;, &#039;Cart&#039;, &#039;Cart 2&#039;, &#039;Cart 3&#039;, &#039;Calculate&#039;],
	&#039;Form Control Icons&#039; : [&#039;Copy&#039;, &#039;Copy 2&#039;, &#039;Copy 3&#039;, &#039;Paste&#039;, &#039;Paste 2&#039;, &#039;Paste 3&#039;, &#039;Settings&#039;, &#039;Cancel circle&#039;, &#039;Checkmark circle&#039;, &#039;Spell check&#039;, &#039;Enter&#039;, &#039;Exit&#039;, &#039;Radio checked&#039;, &#039;Radio unchecked&#039;, &#039;Console&#039;]
};
// Init the icon picker with custom source and search
$(&#039;.myselect&#039;).fontIconPicker({
	source: icm_icons,
	searchSource: icm_icon_search,
	useAttribute: true,
	attributeName: &#039;data-icomoon&#039;
});
								</pre>
							</td>
						</tr>
						<tr>
							<th>useAttribute</th>
							<td><code>Boolean</code></td>
							<td>Whether to use attribute selector instead of class selector for printing icons inside the picker. For example the HTML code <code>&lt;i data-icomoon=&quot;&amp;#xe1c2;&quot;&gt;&lt;/i&gt;</code> will print this icon: <i data-icomoon="&#xe1c2;"></i>. Under such circumstances you will either pass numeric hexadecimal or decimal numbers to the source object and set the <code>convertToHex</code> option to true or pass the whole unicode string <code>&amp;#xe1c2;</code>.</td>
							<td><code>&#039;data-icon&#039;</code></td>
							<td>
								<pre class="brush: js">
$(&#039;.myselect&#039;).fontIconPicker({
	source: [57392, 57397, 57398, 57399, 57402],
	searchSource: [&#039;Tag&#039;, &#039;Cart&#039;, &#039;Cart 2&#039;, &#039;Cart 3&#039;, &#039;Calculate&#039;]
	useAttribute: true,
	attributeName: &#039;data-icomoon&#039;
});
								</pre>
							</td>
						</tr>
						<tr>
							<th>attributeName</th>
							<td><code>String</code></td>
							<td>The name of the HTML attribute where the Unicode is to be put. This is ignored if <code>useAttribute</code> is set to false.</td>
							<td><code>&#039;data-icon&#039;</code></td>
							<td>Please see <code>useAttribute</code></td>
						</tr>
						<tr>
							<th>convertToHex</th>
							<td><code>Boolean</code></td>
							<td>Whether to convert the source to hexadecimal string and thereby put the Unicode character to the provided HTML attribute. If set to false, then you need to provide the Unicode character directly in escaped format (eg <code>&amp;#xe1c2;</code>). For ease of usage, it is best to pass direct decimal or hexadecimal <code>number</code> data to the source. This is ignored if <code>useAttribute</code> is set to false.</td>
							<td><code>true</code></td>
							<td>
							<input type="text" id="no_hexadecimal" name="no_hexadecimal" />
								<pre class="brush: html">
&lt;!-- input field --&gt;
&lt;input type=&quot;text&quot; id=&quot;no_hexadecimal&quot; name=&quot;no_hexadecimal&quot; /&gt;
&lt;!-- init the icon picker --&gt;
&lt;script type=&quot;text/javascript&quot;&gt;
	$(&#039;#no_hexadecimal&#039;).fontIconPicker({
		source: [&#039;&amp;#xe1b1;&#039;, &#039;&amp;#xe1b2;&#039;, &#039;&amp;#xe1b3;&#039;, &#039;&amp;#xe1b4;&#039;, &#039;&amp;#xe1b5;&#039;, &#039;&amp;#xe1b6;&#039;, &#039;&amp;#xe1b7;&#039;, &#039;&amp;#xe1b8;&#039;, &#039;&amp;#xe1b9;&#039;, &#039;&amp;#xe1ba;&#039;],
		searchSource: [&#039;Libre Office&#039;, &#039;File PDF&#039;, &#039;File Open Office&#039;, &#039;File Word&#039;, &#039;File Excel&#039;, &#039;File ZIP&#039;, &#039;File PowerPoint&#039;, &#039;File XML&#039;, &#039;File CSS&#039;, &#039;HTML 5&#039;],
		useAttribute: true,
		attributeName: &#039;data-icomoon&#039;,
		convertToHex: false,
		theme: &#039;fip-bootstrap&#039;
	});
&lt;/script&gt;
								</pre>
							</td>
						</tr>
						<tr>
							<th>allCategoryText</th>
							<td><code>String</code></td>
							<td>If categorized then use this option to modify the <code>From all categories</code> option of the category dropdown.</td>
							<td><code>&#039;From all categories&#039;</code></td>
							<td>
								<pre class="brush: js">
$(&#039;.myselect&#039;).fontIconPicker({
	useAttribute: true,
	attributeName: &#039;data-icomoon&#039;,
	allCategoryText: &#039;Show all&#039;
});
								</pre>
							</td>
						</tr>
						<tr>
							<th>unCategorizedText</th>
							<td><code>String</code></td>
							<td>In case of <code>SELECT</code> fields with <code>OPTGROUP</code> any <code>OPTION</code> which is not a child of some <code>OPTGROUP</code> are considered under the <em>Uncategorized</em> category. You can change the label of this pseudo category using this option.</td>
							<td><code>&#039;Uncategorized&#039;</code></td>
							<td>
								<pre class="brush: js">
$(&#039;.myselect&#039;).fontIconPicker({
	useAttribute: true,
	attributeName: &#039;data-icomoon&#039;,
	unCategorizedText: &#039;Default Icons&#039;
});
								</pre>
							</td>
						</tr>
					</tbody>
				</table>
			</div>
		</section> <!-- /#options -->

		<!-- #apis -->
		<section id="plugin-apis">
			<hr />
			<h2><a href="#main" class="icon-up-open"></a> <i class="icomoon-lab"></i> Plugin APIs</h2>
			<hr />
			<p><code>fontIconPicker</code> provides three public APIs to manipulating the icon picker.</p>
			<div class="table-responsive">
				<table class="table table-striped table-bordered table-hover">
					<thead>
						<tr>
							<th>API</th>
							<th>Parameters</th>
							<th>Description</th>
							<th>Example</th>
						</tr>
					</thead>
					<tbody>
						<tr>
							<th rowspan="2">setIcons</th>
							<td>
								<strong>newIcons</strong><br />
								<code>Array | Object</code><br /><em>An array or object of new icons. The format is same as <code>source</code> option.</em>
							</td>
							<td rowspan="2">
								Use this method to dynamically change icons on the fly.
							</td>
							<td rowspan="2">
								<h4>Live</h4>
								<input type="text" name="change-icons" id="change-icons" />
								<span class="change-icons-buttons">
									<button type="button" class="btn btn-primary change-icons-all">All Icons</button>
									<button type="button" class="btn btn-default change-icons-1">Set 1</button>
									<button type="button" class="btn btn-default change-icons-2">Set 2</button>
									<button type="button" class="btn btn-default change-icons-3">Set 3</button>
								</span>
								<hr />
								<h4>HTML</h4>
								<pre class="brush: html">
&lt;input type=&quot;text&quot; name=&quot;change-icons&quot; id=&quot;change-icons&quot; /&gt;
&lt;span class=&quot;change-icons-buttons&quot;&gt;
	&lt;button type=&quot;button&quot; class=&quot;btn btn-primary change-icons-all&quot;&gt;All Icons&lt;/button&gt;
	&lt;button type=&quot;button&quot; class=&quot;btn btn-default change-icons-1&quot;&gt;Set 1&lt;/button&gt;
	&lt;button type=&quot;button&quot; class=&quot;btn btn-default change-icons-2&quot;&gt;Set 2&lt;/button&gt;
	&lt;button type=&quot;button&quot; class=&quot;btn btn-default change-icons-3&quot;&gt;Set 3&lt;/button&gt;
&lt;/span&gt;
								</pre>
								<h4>JS</h4>
								<pre class="brush: js">
/**
 * Dynamically set icons
 *
 */
// Get the variable to use the public APIs
var dynamicIconsElement = $(&#039;#change-icons&#039;).fontIconPicker({
	source: icm_icons,
	searchSource: icm_icon_search,
	useAttribute: true,
	attributeName: &#039;data-icomoon&#039;,
	theme: &#039;fip-bootstrap&#039;
});

// Add the event listeners and change icons dynamically
$(&#039;.change-icons-all&#039;).on(&#039;click&#039;, function(e) {
	// Prevent default action
	e.preventDefault();

	// Set the icon
	dynamicIconsElement.setIcons(icm_icons, icm_icon_search);

	// Change the button appearance
	$(&#039;.change-icons-buttons button&#039;).removeClass(&#039;btn-primary&#039;).addClass(&#039;btn-default&#039;);
	$(this).removeClass(&#039;btn-default&#039;).addClass(&#039;btn-primary&#039;);
});
$(&#039;.change-icons-1&#039;).on(&#039;click&#039;, function(e) {
	// Prevent default action
	e.preventDefault();

	// Set the icon
	dynamicIconsElement.setIcons(icm_icons_1, icm_icon_search_1);

	// Change the button appearance
	$(&#039;.change-icons-buttons button&#039;).removeClass(&#039;btn-primary&#039;).addClass(&#039;btn-default&#039;);
	$(this).removeClass(&#039;btn-default&#039;).addClass(&#039;btn-primary&#039;);
});
$(&#039;.change-icons-2&#039;).on(&#039;click&#039;, function(e) {
	// Prevent default action
	e.preventDefault();

	// Set the icon
	dynamicIconsElement.setIcons(icm_icons_2, icm_icon_search_2);

	// Change the button appearance
	$(&#039;.change-icons-buttons button&#039;).removeClass(&#039;btn-primary&#039;).addClass(&#039;btn-default&#039;);
	$(this).removeClass(&#039;btn-default&#039;).addClass(&#039;btn-primary&#039;);
});
$(&#039;.change-icons-3&#039;).on(&#039;click&#039;, function(e) {
	// Prevent default action
	e.preventDefault();

	// Set the icon
	dynamicIconsElement.setIcons(icm_icons_3, icm_icon_search_3);

	// Change the button appearance
	$(&#039;.change-icons-buttons button&#039;).removeClass(&#039;btn-primary&#039;).addClass(&#039;btn-default&#039;);
	$(this).removeClass(&#039;btn-default&#039;).addClass(&#039;btn-primary&#039;);
});
								</pre>
							</td>
						</tr>
						<tr>
							<td>
								<strong>iconSearch</strong> <em>(optional)</em><br />
								<code>Array | Object</code> <br /><em>An array or object of new icon search values. The format is same as <code>searchSource</code> option.</em>
							</td>
						</tr>
						<tr>
							<th>destroyPicker</th>
							<td><code>N/A</code></td>
							<td>Use this to remove the icon picker and restore the original element.</td>
							<td>
								<h4>Live</h4>
								<select id="destroy-api" name="destroy-api" class="form-control">
									<option value="">No icon</option>
									<option>icon-user</option>
									<option>icon-search</option>
									<option>icon-right-dir</option>
									<option>icon-star</option>
									<option>icon-cancel</option>
									<option>icon-help-circled</option>
									<option>icon-info-circled</option>
									<option>icon-eye</option>
									<option>icon-tag</option>
									<option>icon-bookmark</option>
									<option>icon-heart</option>
									<option>icon-thumbs-down-alt</option>
									<option>icon-upload-cloud</option>
									<option>icon-phone-squared</option>
									<option>icon-cog</option>
									<option>icon-wrench</option>
									<option>icon-volume-down</option>
									<option>icon-down-dir</option>
									<option>icon-up-dir</option>
									<option>icon-left-dir</option>
									<option>icon-thumbs-up-alt</option>
								</select>
								<span class="destroy-api-buttons">
									<button type="button" class="btn btn-danger destroy-button-destroy"><i class="icomoon-remove2"></i> Destroy</button>
									<button type="button" class="btn btn-success destroy-button-restore" style="display: none; margin-top: 10px;"><i class="icomoon-undo2"></i> Restore</button>
								</span>
								<div class="clearfix"></div>
								<h4>HTML</h4>
								<pre class="brush: html">
&lt;select id=&quot;destroy-api&quot; name=&quot;destroy-api&quot;&gt;
	&lt;option value=&quot;&quot;&gt;No icon&lt;/option&gt;
	&lt;option&gt;icon-user&lt;/option&gt;
	&lt;option&gt;icon-search&lt;/option&gt;
	&lt;option&gt;icon-right-dir&lt;/option&gt;
	&lt;option&gt;icon-star&lt;/option&gt;
	&lt;option&gt;icon-cancel&lt;/option&gt;
	&lt;option&gt;icon-help-circled&lt;/option&gt;
	&lt;option&gt;icon-info-circled&lt;/option&gt;
	&lt;option&gt;icon-eye&lt;/option&gt;
	&lt;option&gt;icon-tag&lt;/option&gt;
	&lt;option&gt;icon-bookmark&lt;/option&gt;
	&lt;option&gt;icon-heart&lt;/option&gt;
	&lt;option&gt;icon-thumbs-down-alt&lt;/option&gt;
	&lt;option&gt;icon-upload-cloud&lt;/option&gt;
	&lt;option&gt;icon-phone-squared&lt;/option&gt;
	&lt;option&gt;icon-cog&lt;/option&gt;
	&lt;option&gt;icon-wrench&lt;/option&gt;
	&lt;option&gt;icon-volume-down&lt;/option&gt;
	&lt;option&gt;icon-down-dir&lt;/option&gt;
	&lt;option&gt;icon-up-dir&lt;/option&gt;
	&lt;option&gt;icon-left-dir&lt;/option&gt;
	&lt;option&gt;icon-thumbs-up-alt&lt;/option&gt;
&lt;/select&gt;
&lt;span class=&quot;destroy-api-buttons&quot;&gt;
	&lt;button type=&quot;button&quot; class=&quot;btn btn-default destroy-button-destroy&quot;&gt;Destroy&lt;/button&gt;
	&lt;button type=&quot;button&quot; class=&quot;btn btn-default destroy-button-restore&quot; style=&quot;display: none;&quot;&gt;Restore&lt;/button&gt;
&lt;/span&gt;
								</pre>
								<h4>JS</h4>
								<pre class="brush: js">
/**
 * Destroy API
 */
// Get the variables - Icon Picker and buttons
var destroyIconElement = $(&#039;#destroy-api&#039;).fontIconPicker({
	theme: &#039;fip-bootstrap&#039;
}),
destroyButton = $(&#039;.destroy-button-destroy&#039;),
restoreButton = $(&#039;.destroy-button-restore&#039;);

// Attach the events
destroyButton.on(&#039;click&#039;, function() {
	// Destroy the picker
	destroyIconElement.destroyPicker();

	// Change appearance
	destroyButton.hide();
	restoreButton.fadeIn(&#039;fast&#039;);
});

restoreButton.on(&#039;click&#039;, function() {
	// Restore the picker
	destroyIconElement.refreshPicker();

	// Change appearance
	restoreButton.hide();
	destroyButton.fadeIn(&#039;fast&#039;);
});
								</pre>
							</td>
						</tr>
						<tr>
							<th>refreshPicker</th>
							<td>
								<strong>newOptions</strong> <em>(optional)</em><br />
								<code>Object | Boolean</code> <br /><em>Pass plugin options to override original ones. Pass false or do not pass anything to use the original ones.</em>
							</td>
							<td>
								Refresh the icon picker from DOM or passed options. Useful when DOM has been changed or reinitializing after calling the destroy method or changing the options values.
							</td>
							<td>
								<h4>Live</h4>
								<select id="refresh-api" name="refresh-api">
									<option value="">No icon</option>
									<option>icon-user</option>
									<option>icon-search</option>
									<option>icon-right-dir</option>
									<option>icon-star</option>
									<option>icon-cancel</option>
									<option>icon-help-circled</option>
									<option>icon-info-circled</option>
									<option>icon-eye</option>
									<option>icon-tag</option>
									<option>icon-bookmark</option>
									<option>icon-heart</option>
									<option>icon-thumbs-down-alt</option>
									<option>icon-upload-cloud</option>
									<option>icon-phone-squared</option>
									<option>icon-cog</option>
									<option>icon-wrench</option>
									<option>icon-volume-down</option>
									<option>icon-down-dir</option>
									<option>icon-up-dir</option>
									<option>icon-left-dir</option>
									<option>icon-thumbs-up-alt</option>
								</select>
								<span class="refresh-api-buttons">
									<button type="button" class="btn btn-default"><i class="icomoon-search"></i> Toggle Search</button>
								</span>
								<h4>HTML</h4>
									<pre class="brush: html">
&lt;select id=&quot;refresh-api&quot; name=&quot;refresh-api&quot;&gt;
	&lt;option value=&quot;&quot;&gt;No icon&lt;/option&gt;
	&lt;option&gt;icon-user&lt;/option&gt;
	&lt;option&gt;icon-search&lt;/option&gt;
	&lt;option&gt;icon-right-dir&lt;/option&gt;
	&lt;option&gt;icon-star&lt;/option&gt;
	&lt;option&gt;icon-cancel&lt;/option&gt;
	&lt;option&gt;icon-help-circled&lt;/option&gt;
	&lt;option&gt;icon-info-circled&lt;/option&gt;
	&lt;option&gt;icon-eye&lt;/option&gt;
	&lt;option&gt;icon-tag&lt;/option&gt;
	&lt;option&gt;icon-bookmark&lt;/option&gt;
	&lt;option&gt;icon-heart&lt;/option&gt;
	&lt;option&gt;icon-thumbs-down-alt&lt;/option&gt;
	&lt;option&gt;icon-upload-cloud&lt;/option&gt;
	&lt;option&gt;icon-phone-squared&lt;/option&gt;
	&lt;option&gt;icon-cog&lt;/option&gt;
	&lt;option&gt;icon-wrench&lt;/option&gt;
	&lt;option&gt;icon-volume-down&lt;/option&gt;
	&lt;option&gt;icon-down-dir&lt;/option&gt;
	&lt;option&gt;icon-up-dir&lt;/option&gt;
	&lt;option&gt;icon-left-dir&lt;/option&gt;
	&lt;option&gt;icon-thumbs-up-alt&lt;/option&gt;
&lt;/select&gt;
&lt;span class=&quot;refresh-api-buttons&quot;&gt;
	&lt;button type=&quot;button&quot; class=&quot;btn btn-default&quot;&gt;Toggle Search&lt;/button&gt;
&lt;/span&gt;
									</pre>
								<h4>JS</h4>
								<pre class="brush: js">
/**
 * Refresh API
 */
var refreshAPIElement = $(&#039;#refresh-api&#039;).fontIconPicker({
	hasSearch: true,
	theme: &#039;fip-bootstrap&#039;
});
$(&#039;.refresh-api-buttons button&#039;).on(&#039;click&#039;, function() {
	// Toggle the hasSearch value
	if ( $(this).data(&#039;searchCanceled&#039;) ) {
		refreshAPIElement.refreshPicker({
			hasSearch: true,
			theme: &#039;fip-bootstrap&#039;
		});
		$(this).data(&#039;searchCanceled&#039;, false);
	} else {
		refreshAPIElement.refreshPicker({
			hasSearch: false,
			theme: &#039;fip-bootstrap&#039;
		});
		$(this).data(&#039;searchCanceled&#039;, true);
	}
});
								</pre>
							</td>
						</tr>
					</tbody>
				</table>
			</div>
		</section> <!-- /#apis -->

		<!-- #extras -->
		<section id="extras">
			<hr />
			<h2><a class="icon-up-open" href="#main"></a><i class="icomoon-plus"></i> Plugin Extras</h2>
			<hr />
			<h3><i class="icomoon-paint-format"></i> Creating your own theme</h3>
			<hr />
			<p>Using the <code>theme</code> parameter of the plugin settings, you can give custom classes to the icon picker and thereby change the appearance of individual pickers on the same page. For example if you pass <code>theme: 'mytheme'</code> then a class <code>mytheme</code> will be added to <code>.icons-selector</code> container. Then you can add custom styling using CSS selectors like <code>.mytheme.icons-selector</code>. For the sake of convention and to avoid CSS conflict, we suggest prefixing your theme name with <code>fip-</code>. So the settings becomes <code>theme: 'fip-mytheme'</code> and CSS selector becomes <code>.fip-mytheme.icons-selector</code>. A sample CSS file is given below:</p>
			<pre class="brush: css">
/* fontIconPicker My Theme {@link https://github.com/micc83/fontIconPicker} */
/* Main container */
.fip-mytheme.icons-selector {

}
/* Icon selector */
.fip-mytheme.icons-selector .selector {

}
/* Selector open button */
.fip-mytheme.icons-selector .selector-button {

}
/* Selector open button hover */
.fip-mytheme.icons-selector .selector-button:hover {

}
.fip-mytheme.icons-selector .selector-button:active {

}
.fip-mytheme.icons-selector .selector-button:hover i {

}
/* Selector open button icon */
.fip-mytheme.icons-selector .selector-button i {

}
/* Selected icon */
.fip-mytheme.icons-selector .selected-icon {

}
.fip-mytheme.icons-selector .selected-icon i {

}
/* IconPicker Popup */
.fip-mytheme.icons-selector .selector-popup {

}
/* Search input & category selector */
.fip-mytheme.icons-selector .selector-search input[type="text"],
.fip-mytheme.icons-selector .selector-category select {

}
.fip-mytheme.icons-selector .selector-search input[type="text"]:focus,
.fip-mytheme.icons-selector .selector-category select:focus {

}
/* Search input placeholder */
.fip-mytheme.icons-selector input::-webkit-input-placeholder {

}
.fip-mytheme.icons-selector input:-moz-placeholder {

}
.fip-mytheme.icons-selector input::-moz-placeholder {

}
.fip-mytheme.icons-selector input:-ms-input-placeholder {

}
/* Search and cancel icon */
.fip-mytheme.icons-selector .selector-search i {

}
/* Icon Container inside Popup */
.fip-mytheme.icons-selector .fip-icons-container {

}
/* Icon container loading */
.fip-mytheme.icons-selector .fip-icons-container .loading {

}
/* Single icon box */
.fip-mytheme.icons-selector .fip-box {

}
/* Single icon box hover */
.fip-mytheme.icons-selector .fip-box:hover {

}

/* Pagination and footer icons */
.fip-mytheme.icons-selector .selector-footer, .fip-mytheme.icons-selector .selector-footer i {

}

/* Pagination arrows icons hover */
.fip-mytheme.icons-selector .selector-arrows i:hover {

}
/* Currently selected icon color */
.fip-mytheme.icons-selector span.current-icon, .fip-mytheme.icons-selector span.current-icon:hover {

}
.fip-mytheme.icons-selector span.current-icon i, .fip-mytheme.icons-selector span.current-icon:hover i {

}
/* No icons found */
.fip-mytheme.icons-selector .icons-picker-error i:before {

}

/* Transitions */
.fip-mytheme.icons-selector .selector-search input[type="text"],
.fip-mytheme.icons-selector .selector-category select,
.fip-mytheme.icons-selector .fip-box {
	-webkit-transition: all 300ms ease-in-out;
	-moz-transition: all 300ms ease-in-out;
	-ms-transition: all 300ms ease-in-out;
	-o-transition: all 300ms ease-in-out;
	transition: all 300ms ease-in-out;
}
			</pre>
			<p>If you have created something beautiful and want to share, then you are always welcome to send a pull request on <a href="https://github.com/micc83/fontIconPicker">github</a>.</p>
			<h3><i class="icomoon-console"></i> Auto Indexing Icons</h3>
			<hr />
			<p>Categorizing icons from a rather large set of collection can be quite tedious. While fontIconPicker can be used to auto generate icon list from <code>selection.json</code> file, it still will not categorize the icons (yet) and will require your intervention to do so.</p>
			<p>To save you from the trouble a PHP script was written to automatically categorize and index icons downloaded from <a href="http://icomoon.io">IcoMoon App</a>. You can get it for free from <a href="https://github.com/swashata/IcoMoonIconIndexer">this link</a>.</p>
			<p>If you wish to use the icomoon and fontello library from this package then the icons are already indexed and the JS variables are already defined above in the examples section.</p>
			<hr />
		</section>
	</main>
	<!-- /#main -->

	<!-- #site-footer -->
	<footer id="site-footer">
		<div class="well well-sm">
			<div class="container">
				<div class="row">
					<div class="col-md-4">
						<h3><i class="icon-globe"></i>Browser Compatibility</h3>
						<p>jQuery iconPicker has been successfully tested on:</p>
						<p class="text-center browsers">
							<i class="icomoon-firefox bstooltip" title="Mozilla Firefox (edge)"></i>
							<i class="icomoon-chrome bstooltip" title="Google Chrome (edge)"></i>
							<i class="icomoon-IE bstooltip" title="Internet Explorer (IE8+)"></i>
							<i class="icomoon-opera bstooltip" title="Opera (edge)"></i>
						</p>
					</div>
					<div class="col-md-8">
						<h3><i class="icon-thumbs-up"></i>Credits</h3>
						<p><strong>jQuery fontIconPicker</strong> has been made by <a href="http://codeb.it">me</a> &amp; <a href="https://github.com/swashata">swashata</a>. You can contact me at <a href="mailto:micc83@gmail.com">micc83@gmail.com</a> or <a href="https://twitter.com/Micc1983">twitter</a> for any issue or feature request.</p>

						<p>I really have to thank <a href="http://www.minimamente.com">miniMAC</a> for the idea, <a href="http://zenorocha.com/">Zeno Rocha</a> for jQuery plugin boilerplate, <a href="http://fortawesome.github.io/Font-Awesome/">Dave Gandy</a> & <a href="http://icomoon.io/">KeyaMoon</a> for the beautiful sets of icons and <a href="http://www.advancedcustomfields.com/">Elliot Condon</a> for the amazing Advanced Custom Field WordPress plugin.</p>
						<p>
							Additionally <a href="http://getbootstrap.com/">Bootstrap</a>, <a href="http://bootstrapvalidator.com/">BootstrapValidator</a> and <a href="http://alexgorbatchev.com/SyntaxHighlighter/">SyntaxHighlighter</a> were used for this demo.
						</p>

						<p><strong>fontIconPicker 2</strong> is released under <a href="http://opensource.org/licenses/MIT" target="_blank">MIT license</a>. Do wathever you want with it and it is fully compatible with GPL so that you can include it in your <a href="http://wordpress.org/">WordPress</a> projects.</p>
					</div>
				</div>
			</div>
		</div>
	</footer> <!-- /#site-footer -->
	<a href="https://github.com/micc83/fontIconPicker"><img style="position: fixed; top: 0; left: 0; border: 0; z-index: 1031" src="https://camo.githubusercontent.com/c6625ac1f3ee0a12250227cf83ce904423abf351/68747470733a2f2f73332e616d617a6f6e6177732e636f6d2f6769746875622f726962626f6e732f666f726b6d655f6c6566745f677261795f3664366436642e706e67" alt="Fork me on GitHub" data-canonical-src="https://s3.amazonaws.com/github/ribbons/forkme_left_gray_6d6d6d.png"></a>
</body>
</html>
